реклама

HTML5 е най-новите и най-великите Какво е HTML5 и как се променя начина, по който преглеждам? [MakeUseOf обяснява]През последните няколко години може би сте чували понякога HTML5 от време на време. Независимо дали знаете нещо за уеб разработката или не, концепцията може да бъде донякъде мъглява и объркваща. Очевидно е, че ... Прочетете още версия на най-широко използвания език за маркиране в мрежата. Има някои големи промени от последната версия на езика и ако не ги използвате, пропускате някои наистина готини функционалности.

Нямаме място да покрием всеки нов елемент в петата версия на HTML, но тези девет са някои от най-важните. За повече информация относно новите елементи и API в HTML5, не забравяйте проверете W3Schools.

Въведение в семантичните елементи

Подобно на голяма част от интернет, HTML5 се насочи към фокуса върху семантиката. Сега, вместо таговете, които просто се използват за форматиране, те също се използват за разказване на браузъри и търсачките Топ 7 семантични търсачки като алтернатива на Google Прочетете още смисъла на това, което заобикалят.

Например,

просто казва на браузъра, че съдържа абзац.

, която ще обсъдим моментално, казва на браузъра, че съдържа основното съдържание на страницата.

Семантичната мрежа все още се развива и ние едва започнахме да надраскваме повърхността на това, което може да направи. HTML5 помага за внедряването семантично маркиране Какво е семантичната маркировка и как ще се промени в интернет завинаги [обяснена технология] Прочетете още до много по-голяма част от интернет и това може да бъде полезно само за бъдещето на семантичната обработка.

1.

Най-

етикетът определя „независимо, самостоятелно съдържание“. Най-лесният пример е, разбира се, статия. За тази конкретна статия, ние отваряме маркера преди въвеждането и го затваряме след приключването.

 Целият текст във вашата самостоятелна секция. 

Но има и други начини, по които бихте могли да го използвате. Например, много блогове за готвене включват лични истории за това как е възникнала рецепта или защо тя е важна за писателя. След това следва самата рецепта. Можете да направите аргумента, че всеки от тези елементи може да стои самостоятелно.

Във форум всеки пост или тема може да се счита за самостоятелен и всеки може да бъде маркиран със своя собствена

маркер. В по-голямата си част той ще се използва в основното съдържание на дадена страница. Но имайте предвид, че и вие можете да го използвате по-креативно.

2.

Тясно свързана с

е

. Това определя „тематично групиране на съдържание, обикновено с заглавие.“ Така

ще бъде вътре

... нали?

Не е задължително. W3 посочва, че това зависи от структурата на вашия сайт. Може да имате самостоятелно съдържание в различни секции на страницата си (помислете например за първа страница на новинарски сайт). След това може да имате секции в тази статия.

Защо имате нужда от КПР
Всичко звучи по-добре.
Как да настроите ЦАП
Ето какво трябва да направите.. .

Можете дори да имате секции в секции, ако отговаря на вашата страница. Не забравяйте, че раздел е просто „тематично групиране на съдържание“ и ще намерите много места, за да го използвате.

3.

Този елемент „трябва да се използва като контейнер за въвеждащо съдържание.“ Накратко, това е частта от вашата страница, която помага на хората да разберат какво ще прочетат.

Но не се заблуждавайте - можете да използвате този контейнер повече от веднъж. Например, можете да го използвате, за да идентифицирате заглавието на страницата и уводния параграф на вашата публикация в блога. Но бихте могли да го използвате и за отбелязване на въвеждащото съдържание за всеки раздел.

Всичко, което трябва да знаете за DACs
Ето полезно запознаване с DACs ...
 Останалата част от вашата статия отива тук.

Разделите на заглавките обикновено съдържат най-малко един заглавен маркер - H1, H2 и т.н. Не е нужно, но като цяло, ако използвате заглавен маркер, има добър залог, който включвате съдържанието на заглавката.

4.

W3 казва, че етикетите на долните колонтитули обикновено съдържат „автора на документа, информация за авторските права, връзки към условията за ползване, информация за контакт и т.н.“ Можете да мислите за това като „домакинство“.

Документацията също така гласи, че можете да имате повече от един колонтитул на страницата си. Вероятно е обаче добра идея да се съхранява цялата тази информация на едно място.

5.

Този маркер съдържа връзките за навигация за дадена страница. Обърнете внимание, че само разделът за навигация получава този маркер, а не всички връзки на вашата страница. Това е за навигационни ленти и подобни инструменти.

Това е наистина прост маркер - това е всичко, което има за него. Използвайте го, за да определите секцията за навигация и не го използвайте отново на страницата си.

6.

Един от най-интересните нови елементи в HTML5 е отстрани. W3 му дава донякъде безполезната дефиниция на „някакво съдържание настрана от съдържанието, в което е поставено“.

Накратко, отстрани е всичко, което е свързано с (но отделно от) заобикалящата информация. Може да е странична лента, която добавя подробности към съдържанието ви. Когато се използва в рамките на набор от

маркери, той предоставя допълнителна информация, която не е необходима за разбирането на основното съдържание.

Например, ако бяхме включили странична лента в тази статия, даваща информация за историята на HTML5, това би било отмяна.

Но на

 Основната статия отива тук.  Статията продължава тук.

Тъй като има много приложения за този маркер, той може да бъде объркващ. Ако имате предвид, че това е „вторично съдържание“ и че не винаги е необходимо да е странична лента, ще имате по-добра представа как да го използвате.

7.

Много уебсайтове имат информация, която трябва да бъде показана, но не на видно място. Може би това е информацията за авторското право на снимка. Или фин печат на конкурс. Този вид информация е точно това, за което е предназначен маркерът за подробности.

Когато използвате маркера за подробности, създавате скрит текст, който лесно може да бъде показан. Ето пример:

Щракнете тук, за да видите информация.

Ето по-подробна информация, от която не се нуждаете веднага.

Просто щракнете върху стрелката, за да получите подробности. Simple. Създаването му е също толкова лесно. Ето кода, използван за горния пример:

 Щракнете тук, за да видите информация. 
 Ето по-подробна информация, която не ви трябва веднага. 

Най-

tag определя изречението, което ще бъде показано, докато останалото съдържание е скрито. Имайте предвид, че можете да използвате други тагове в секцията с подробности: заглавия, раздели и т.н.

Има и други готини неща, които можете да правите с HTML 8 страхотни HTML ефекта, които всеки може да добави към своя уебсайтНе е нужно да знаете CSS или PHP, за да изградите фантазиран сайт. Използвайте тези готини HTML трикове, за да генерирате страхотни ефекти. Прочетете още , дори и да не знаете много CSS или JSON.

8-9.

и

Не се тревожете, маркер, който използвате години наред, не изчезва.

обикаля етикета на изображението и дава възможност на браузъра да разбере, че това е самостоятелно изображение, диаграма, списък с кодове или друга фигура.

Ако фигура бъде премахната от страницата, това няма да повлияе на потока на съдържанието.

Това ви дава вграден начин за добавяне на надпис към вашите изображения. Няма нужда да минавате през вашата CMS вече.

Възползвайте се от мощността на HTML5

Новите елементи в HTML5 добавят много сила, особено за семантични цели. Има допълнителни елементи за форматиране, скаларни измервания, напредък на задачите и други. Можеш да видиш всички нови елементи в W3Schools.

Но ако успеете да овладеете тези девет, ще бъдете на път да използвате добре HTML5. И ако сте нов в HTML, не забравяйте да проверите тези кодови примери 17 прости примера на HTML код, които можете да научите за 10 минутиИскате ли да създадете основна уеб страница? Научете тези HTML примери и ги изпробвайте в текстов редактор, за да видите как изглеждат във вашия браузър. Прочетете още !

Започнали ли сте да използвате HTML5? Кои нови елементи смятате за най-полезни? Споделете мислите си в коментарите по-долу!