Подзаголовки H2–H6

Подзаголовки делят страницу на части. <h2> — разделы, <h3> — подразделы внутри них, дальше по убыванию до <h6>. Вместе с H1 они образуют оглавление документа.

<h1>Как выбрать тепловой насос</h1>
  <h2>Типы насосов</h2>
    <h3>Воздух-вода</h3>
    <h3>Грунт-вода</h3>
  <h2>Расчёт мощности</h2>
  <h2>Стоимость и окупаемость</h2>

Зачем они

Люди не читают — сканируют. Взгляд идёт по заголовкам, пока не зацепится за нужный. Сплошная простыня текста без подзаголовков закрывается, не начавшись, — и это видно в поведенческих метриках.

Поисковик понимает структуру. По подзаголовкам он определяет, какие темы раскрыты на странице и какой фрагмент показать в ответ на конкретный запрос.

Быстрые ответы и оглавления. Блоки с прямым ответом в выдаче собираются в том числе из пар «подзаголовок — абзац под ним». Заголовок в форме вопроса («Сколько стоит подключение?») с коротким ответом сразу под ним — самый надёжный способ туда попасть.

Доступность. В программах экранного доступа есть навигация по заголовкам — это основной способ перемещения по длинной странице для незрячего пользователя.

Как расставлять

• Каждые 200–300 слов — примерно один подзаголовок. Точной нормы нет, ориентируйтесь на экран: если при прокрутке на экране нет ни одного заголовка, их мало.
• Заголовок описывает свой блок. «Что дальше» и «Немного о главном» — не описывают ничего.
• Формулируйте так, как ищут. Подзаголовок — хорошее место для второстепенных запросов: «Сколько стоит», «Сроки монтажа», «Отзывы».
• Уровни по смыслу, не по размеру. Нужен заголовок помельче — задайте размер стилями, а не смените h2 на h4 (про иерархию).

Чего не делать

Оформлять заголовки жирным текстом. <p><b>Расчёт мощности</b></p> выглядит как заголовок, но не является им: ни поисковик, ни скринридер его так не воспримут.

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

Заворачивать в заголовки элементы интерфейса. Кнопки, подписи в форме, названия блоков в подвале — это не разделы документа.

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

• Пункты аудита «Подзаголовки H2» и «Иерархия заголовков».
• Вручную в консоли браузера:

document.querySelectorAll('h1,h2,h3,h4,h5,h6')
    .forEach(h => console.log(h.tagName, h.textContent.trim()));

Прочитайте получившийся список подряд. Если по нему понятно, о чём страница, — структура в порядке. Если нет — переписывайте заголовки, а не текст.