Тэги: header, footer, nav, aside, section, article, hgroup, main
Новые теги. Появились они в HTML 5 и теперь постоянно нас сопровождают. Обязательно стоит их использовать для выделения смыслов на странице.
Тег header
Для большинства верстальщиков с этим тегом не будет проблем. он применяется в тех блоках где необходимо выделить шапку сайта.
Обычно шапка сайта содержит: логотип, меню навигации на сайте, номера телефонов, ссылки на социальные сети, кнопку для формы обратной связи, в общем те элементы - которые нужны для контакта, навигации и узнаваемости бренда.
Тег menu
В HTML 4 он был аналогом тега ul, в HTML 5 он приобрёл новое качество, смыслового блока для навигации сайта. Но я бы посоветовал не использовать его, заменив на тег nav/
Тег nav
Cлужит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок блок навигации по рубрикам и основное меню.
Личный совет: Разделяйте информацию в этих блоках различными классами, к примеру блок меню лучше назвать класом или id menu, хлебные крошки breadcrumb.
Тэг aside
Этот тег применяется когда необходимо объеденить несколько элементов. К примеру: слайдер, рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.
Тег section
Задача этого тега, разбить страницу на блоки, так чтобы каждый блок нёс свою смсловую нагрузку.
Тег article
Сообщает браузеру о том что перед ним статья. На одной странице может быть несколько тегов article.
Этот тег как может входить в блок secrion, так и быть разделён им на отдельные блоки.
section
article
section/section
section/section
/article
article
section/section
/article
/section
Тег main
Этот тег содержит в себе основное тело страницы, уникальное, основу смысловой нагрузки.
Он не может входить в другие блочные теги: article, aside, footer, header или nav.
Он не воспринимается браузерами как блочный, поэтому при верстке стоит указываеть ему параметр display: block;
Тэг hgroup
Бывает необходимо объединить заголовки в одну смысловую группу.
Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3.
На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей.
Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup: