Семантические теги: header, nav, main, article, footer

Семантический HTML использует элементы, описывающие смысл содержимого, а не только его внешний вид. <article> сообщает: «это самостоятельная часть содержимого». Универсальный <div> ничего не сообщает о смысле.

Первые веб-разработчики строили макеты исключительно из элементов <div> и <span>. Программы чтения с экрана не могли отличить навигацию от содержимого и рекламы. Поисковым системам приходилось угадывать структуру страницы.

Элемент <header> содержит вводное содержимое страницы или раздела: обычно логотип, название сайта и навигацию. На странице может быть несколько заголовков — один для сайта и по одному для каждой статьи.

Используйте <nav>, чтобы объединить наборы навигационных ссылок: главное меню, цепочку навигации или оглавление. Программы чтения с экрана объявляют области навигации, поэтому пользователи могут сразу перейти к ним или пропустить их.

На каждой странице должен быть ровно один элемент <main>. Он содержит основное содержимое, уникальное для этой страницы, а не повторяющиеся элементы вроде навигации или нижнего колонтитула. Вспомогательные технологии позволяют пользователям сразу перейти к main.

<article> объединяет содержимое, имеющее смысл само по себе и пригодное для распространения: запись в блоге, новость, комментарий пользователя или карточку товара. Спросите себя: «Сохранило бы это смысл, если бы я скопировал это на другой сайт?»

<section> объединяет связанное содержимое, которое должно находиться вместе: главы, вкладки или тематические области. Обычно у каждого раздела есть заголовок. Если содержимое может существовать самостоятельно, используйте article.

<aside> содержит содержимое, косвенно связанное с окружающим: боковые панели, выносные цитаты, рекламу или связанные ссылки. Программы чтения с экрана представляют его как дополнительную область.

<footer> содержит информацию о содержащем его элементе: уведомления об авторских правах, контактные ссылки и связанные документы. Как и у header, у страницы может быть несколько нижних колонтитулов.

Используйте заголовки, чтобы создать логичную структуру документа. На странице должен быть только один <h1>. Для подзаголовков используйте h2, для заголовков подразделов — h3 и так далее. Не пропускайте уровни и не используйте заголовки только ради их визуального размера.

Поисковые системы используют семантическую структуру, чтобы понимать содержимое страницы: страницы с корректными областями и иерархией заголовков часто занимают более высокие позиции. Пользователи программ чтения с экрана перемещаются по областям и заголовкам, поэтому семантика напрямую связана с доступностью.

Какой элемент должен содержать основное уникальное содержимое страницы и присутствовать ровно один раз?

Используйте <header>, <nav>, <main>, <article>, <section>, <aside> и <footer>, чтобы придать документу структуру, понятную браузерам, поисковым системам и программам чтения с экрана.