Иерархия заголовков и доступность

Заголовки образуют дерево. Уровень показывает вложенность: h2 — раздел, h3 внутри него — подраздел. Пропуск уровня (h2 → h4) ломает дерево: получается подраздел без раздела.

Правильно:

<h1>Тепловые насосы</h1>
  <h2>Типы</h2>
    <h3>Воздух-вода</h3>
    <h3>Грунт-вода</h3>
  <h2>Монтаж</h2>

Неправильно:

<h1>Тепловые насосы</h1>
  <h4>Типы</h4>        <!-- пропущены h2 и h3 -->
  <h2>Монтаж</h2>

Спускаться можно только на один уровень за раз. Подниматься — на сколько угодно: после h4 вполне может идти h2, это просто конец подраздела.

Почему это важно

Доступность. В программах экранного доступа (NVDA, JAWS, VoiceOver) есть навигация по заголовкам: пользователь перемещается по странице клавишей, слушая только заголовки, и по уровням понимает вложенность. Сломанная иерархия превращает эту карту в шум — примерно как оглавление книги, где главы и параграфы перемешаны.

Понимание структуры поисковиком. По дереву заголовков он определяет, какие блоки главные, а какие уточняющие.

Дисциплина в вёрстке. Ровная иерархия обычно означает, что контент продуман. Скачки уровней почти всегда возникают там, где заголовки выбирали по размеру шрифта.

Главная причина проблем

Уровень заголовка выбирают по внешнему виду: «h2 слишком крупный, поставлю h4 — он мельче». Так делать не надо: уровень задаёт смысл, а размер задаётся стилями.

/* Заголовок раздела, который должен выглядеть скромно */
.section-title {
    font-size: 1.125rem;
    font-weight: 600;
}

<h2 class="section-title">Монтаж</h2>

Смысл сохранён, вид — какой нужен.

Как проверить структуру

В консоли браузера (F12 → Console):

document.querySelectorAll('h1,h2,h3,h4,h5,h6')
    .forEach(h => console.log('  '.repeat(+h.tagName[1] - 1) + h.tagName + ' ' + h.textContent.trim()));

Вывод — оглавление с отступами. Смотрите на две вещи: нет ли скачков через уровень и читается ли список как содержание документа.

В нашем отчёте это пункт «Иерархия заголовков»: там показана структура целиком, вида H1 → H2 → H3 → H2.

Расширения для браузера (HeadingsMap, Web Developer) рисуют то же дерево в удобном виде и подсвечивают нарушения.

Что чинить в первую очередь

1. Убедитесь, что H1 ровно один и он в начале.
2. Проверьте, нет ли заголовков в шапке, подвале и меню — там они обычно лишние и портят структуру всей страницы.
3. Выровняйте уровни в основном содержимом.
4. Замените псевдозаголовки (жирный текст в абзаце) на настоящие подзаголовки.