Заголовки h1–h6 и семантика HTML

Как структура заголовков и семантические теги помогают и поисковику, и пользователям скринридеров.

Семантическая разметка — использование тегов по смыслу (<article>, <nav>, <h2>), а не «всё через div». Она даёт поисковику и вспомогательным технологиям структуру документа.

Иерархия заголовков

Заголовки <h1>–<h6> образуют оглавление страницы. Правила простые:

Ровно один <h1> — главная тема страницы. Обычно совпадает по смыслу с title.
Не перескакивайте уровни. После h2 идёт h3, а не сразу h4.
Заголовок — это структура, а не размер шрифта. Хотите крупный текст без смысла заголовка — используйте CSS, а не <h2>.

<h1>Технический SEO</h1>
  <h2>Краулинг</h2>
    <h3>Бюджет обхода</h3>
  <h2>Индексация</h2>
    <h3>Рендеринг JS</h3>
    <h3>Дубли и canonical</h3>

Заголовки и доступность

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

Семантические теги HTML5

Вместо «супа из div» используйте теги по смыслу. Поисковик понимает, где навигация, где основной контент, где подвал — и не путает меню с текстом статьи.

Тег	Смысл
`<header>`	шапка страницы или секции
`<nav>`	блок навигации
`<main>`	основной уникальный контент (один на страницу)
`<article>`	самодостаточная единица (статья, карточка)
`<section>`	смысловой раздел
`<aside>`	боковой/второстепенный контент
`<footer>`	подвал

<body>
  <header><nav>...меню...</nav></header>
  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p>Текст...</p>
    </article>
  </main>
  <footer>...</footer>
</body>

Как работает под капотом: проверка иерархии

Валидатор доступности проходит по заголовкам и ловит два дефекта: несколько h1 и «прыжки» уровней. Воспроизведём логику на Python:

def check_headings(levels):
    problems = []
    h1 = levels.count(1)
    if h1 != 1:
        problems.append(f"h1 на странице: {h1} (нужен ровно 1)")
    prev = 0
    for lvl in levels:
        if prev and lvl > prev + 1:
            problems.append(f"прыжок уровня: h{prev} -> h{lvl}")
        prev = lvl
    return problems or ["иерархия в порядке"]

print("Корректная:", check_headings([1, 2, 3, 2, 3]))
print("С дефектами:", check_headings([1, 1, 2, 4]))

Вывод:

Корректная: ['иерархия в порядке']
С дефектами: ['h1 на странице: 2 (нужен ровно 1)', 'прыжок уровня: h2 -> h4']

Частые ошибки

Несколько h1 — например, логотип в h1 и заголовок статьи тоже в h1.
Заголовки ради размера. <h3> просто чтобы текст был помельче — ломает оглавление.
Div-суп. Вся страница из <div> — поисковику и скринридерам не за что зацепиться.
Прыжки уровней с h2 сразу на h4 — нарушают структуру.

Итог

Ровно один <h1>, далее иерархия h2/h3 без прыжков уровней.
Заголовок — про структуру, а не про размер шрифта; крупный текст делайте через CSS.
Семантические теги (main, article, nav) дают поисковику и скринридерам карту страницы.