Семантическая разметка

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

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

Пример каркаса

<header>
  <a href="/">Логотип</a>
  <nav aria-label="Главное меню">…</nav>
</header>
<main>
  <article>
    <h1>Заголовок статьи</h1>
    <section><h2>Раздел</h2>…</section>
  </article>
  <aside>Похожие материалы</aside>
</main>
<footer>Контакты, реквизиты</footer>

Видимый main на странице один. Если на странице два nav, их различают подписью через aria-label.

Типичные ошибки в шаблонах сайтов

• Заголовки ради размера шрифта. Заголовок виджета в сайдбаре сделан h2, потому что «так красивее», а подзаголовки статьи — жирными абзацами. Уровни заголовков должны отражать вложенность разделов, размер задаётся в CSS. Подробнее — в статье про теги заголовков.
• Логотип в h1 на всех страницах. Главным заголовком страницы становится название компании, а не тема страницы.
• Ссылки вместо кнопок и наоборот. Ссылка ведёт на другой адрес, кнопка выполняет действие на месте.
• section вместо любого div. Раздел без заголовка теряет смысл, для обёрток оформления остаётся div.

Что даёт для поиска

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