Семантична структура за HTML5 страница. Семантика в HTML5

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

Семантична структура за HTML5 страница

В тази статия постепенно ще създадем html страница и ще я украсим със семантични HTML5 тагове.

Фигура - Семантична структура за HTML5 страница.

DOCTYPE и мета тагове в заглавието на страницата

Нека започнем със стандартен шаблон на HTML5 документ и да добавим мета тагове към главата:

Добавих таг, който отговаря за ключовите думи. И етикетът, който отговаря за описанието на страницата. Тези маркери са необходими за SEO оптимизация. Изисква се и правилното попълване на етикета. Заглавието на страницата трябва да бъде уникално за целия сайт и да съдържа в заглавието цялата същност на страницата, за която е посочено.

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

Заглавие на страница

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

Ако имаме и лозунг до заглавието, тогава го поставяме в p, div или span.

Бележка H1 етикет

Трябва да се отбележи, че в HTML5 етикетът H1 се използва за обозначаване на заглавието на контейнера, в който се намира (това може да бъде заглавка, раздел, статия и т.н.)

Преди HTML5 таговете семантиката беше малко по-различна и различна. Така че в HTML4 може да има само едно заглавие H1 на страница! Обикновено това беше заглавието на статията или заглавието на страницата (например, ако това е страница с категория, която показва няколко статии.) H2 се използва за подзаглавия или за раздели на основната статия. H3 за под дялове и така нататък.

Навигация по страницата

Оформлението на основната навигация на сайта трябва да бъде затворено в навигационния таг. Също така трябва да се помни, че се счита за добра практика да се стилизира навигацията с елементи от списъка.

Съдържание на страница

Форматиране на статия

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

Странична лента или колона с приспособления

За всеки отделен елемент на страничната лента използваме блок встрани. Вътре в него оформяме заглавието с таг h1. Така че колоната на страничната лента може да изглежда така:

Маркер на раздела

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

), за да посочи темата на раздела.

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

Пример за използване на етикета на раздел в списък с градове:

Долен колонтитул на сайта - Долен колонтитул

Долният колонтитул на сайта е украсен с етикет

Заключение

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

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

Като продължение на тази тема можете да разгледате други нови HTML5 тагове. Както и микро формати за форматиране и структуриране на данни, като schema.org

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