Поговорим о семантических тегах, которые были введены в HTML5 для облегчения работы разным поисковым роботам и программам анализирующим тексты страниц. Использовать или нет подобные вещи на своём сайте решать только вам, но вообще это считается хорошей практикой и следованием современным стандартам. Не исключено, что обработка контента страниц вашего сайта и общая индексация с этими тегами будет лучше.
На самом деле этих новых семантических тегов не так уж и много, поэтому запомнить их не сложно. В любом случае прикладываю шпаргалку на случай когда вы будите вручную верстать шаблон для сайта. Что бы не помечать это для каждого тега в таблице, сразу скажу, что все теги парные т.е. они образуют контейнер и после открывающего тега должен обязательно быть закрывающий.
Описание семантических тегов разметки HTML5
| Параметр | Описание |
|---|---|
article |
Сама основная статья страницы. Раздел, содержащий независимый элемент содержимого (например, журнальную статью или сообщение на форуме). |
aside |
Раздел, содержимое которого связано с содержимым основной страницы только поверхностно (например, цитаты, дополнительная информация к статье, словарь с терминами). |
mark |
При помощи этого тега можно выделить главную часть в тексте, главные слова на которые надо обратить особое внимание. Что-то вроде bold. |
details |
Раздел, содержащий дополнительные сведения, которые пользователь может просмотреть или скрыть с помощью интерактивного виджета. Данный раздел может также содержать заключительный раздел. |
header |
Шапка сайта. Раздел, содержащий введение или группу элементов навигации. |
footer |
Раздел содержит подвал сайта. Раздел нижнего колонтитула страницы (подвала сайта) или родительский раздел. Данный раздел обычно содержит сведения о родительском разделе и отображается внизу раздела. |
nav |
Тег для навигации сайта. Раздел, содержащий ссылки для навигации. |
section |
Для отельных смысловых абзацев текста статьи. Общий раздел страницы. |
main |
Тег предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п. На странице данный тег можно использовать только 1 раз и он не может быть дочерним элементом таких второстепенных тегов как header, footer, nav, aside, article… |
figure |
Фигура, группировка. Тег для группировки элементов в один блок. |
figcaption |
Подпись к группировкам сделанным при помощи тега figure. |
menu |
Тег предназначен для отображения интерактивного списка пунктов меню. Нужен для создания toolbars различных интерактивных веб приложений, а не просто для навигации по сайту. Аналогично тегам ol и ul внутри контейнера menu список формируется с помощью тегов li. Так же он выступает контейнером для тега command. |
summary |
Заключительный раздел для раздела сведений. |
Вроде бы все семантические теги описаны. Благодарю за внимание.