Заголовки H1–H6

Происхождение и история термина

Заголовки — один из самых старых элементов HTML. На странице «Tags used in HTML» в архиве первого веб-сайта W3C (снимок 1992 года) Тим Бернерс-Ли писал: «Several levels (at least six) of heading are supported» («Поддерживается несколько уровней заголовков — как минимум шесть») ^[5]. Там же H1 назван высшим уровнем, который рекомендуется для начала гипертекстового узла, а сами теги, по словам автора, сохранены в том виде, как их определяло руководство CERN по SGML ^[5].

В первом формальном стандарте — HTML 2.0 (RFC 1866, ноябрь 1995 года, авторы Т. Бернерс-Ли и Д. Коннолли) — раздел 5.4 «Headings: H1 ... H6» описывает шесть элементов заголовков разделов ^[4]. Уже тогда документ предупреждал, что «documents should not skip levels (for example, from H1 to H3)», потому что такие документы трудно преобразовывать в другие представления ^[4]. Там же перечислены типичные способы отображения: H1 — жирный очень крупный шрифт по центру, H2 — жирный крупный шрифт с выравниванием влево и так далее до H6 ^[4]. Привязка уровней к типографике, по-видимому, объясняет, почему заголовки долго воспринимали как инструмент оформления (вывод).

Со временем акцент сместился с внешнего вида на смысл. Позднее в спецификации появился «алгоритм outline» (алгоритм построения структуры документа): предполагалось, что можно использовать <h1> в каждом разделе (<section>, <article>), а браузер сам вычислит реальный уровень по вложенности ^[7]. Браузеры этот алгоритм так и не реализовали ^{[6; 7]}. В 2022 году в репозитории WHATWG появился запрос на изменение № 7829 «replace current outline algorithm with one based on heading levels», подготовленный Стивом Фолкнером ^[6]. Его цель — привести стандарт в соответствие с более чем десятилетней реальностью, в которой алгоритм в браузерах не реализован; изменение убирает идею о том, что секционные элементы влияют на структуру документа ^[6]. Что изменение вошло в стандарт, подтверждает его действующая редакция: структура документа (outline) — это все заголовки документа в порядке их следования в дереве, а уровень задаёт цифра в имени элемента ^[1]. Вложенные H1 внутри секций, которые раньше допускались, теперь не соответствуют стандарту ^[2].

Новейший этап — атрибуты headingoffset и headingreset, которые в текущей редакции HTML Living Standard (раздел 4.3.11.1) позволяют сместить уровни заголовков у вложенного содержимого ^[1]. Поддержка атрибутов не подтверждена — см. раздел «Ошибки, ограничения и спорные вопросы».

Суть и механизм

Синтаксис и уровни

Стандарт WHATWG определяет: «These elements represent headings for their sections» («Эти элементы представляют заголовки своих разделов») ^[1]. Уровень заголовка задаёт цифра в имени элемента: <h1> — для раздела верхнего уровня, <h2> — для подраздела и так далее ^[1]. Внутри заголовка допускается только фразовое содержимое (текст, ссылки, выделения), у элемента нет собственных атрибутов, кроме глобальных ^[1].

Если у предка задан атрибут headingoffset (целое число от 0 до 8), вычисленный уровень заголовка увеличивается на это смещение; смещения суммируются вверх по дереву до элемента с headingreset, а итоговый уровень не может быть больше 9 ^[1].

Правило последовательности

Ключевая норма стандарта: каждый следующий заголовок «must have a heading level that is less than, equal to, or 1 greater than» уровень предыдущего ^[1]. Иначе говоря, можно вернуться на любой более высокий уровень, остаться на том же или опуститься ровно на один. В стандарте приведён пример несоответствия: за <h1> сразу следует <h3>; корректный вариант использует <h2> ^[1]. Отдельно сказано, что хотя бы один заголовок в структуре «should have a heading level of 1» ^[1]. Важно различать силу требований: последовательность — обязательное требование (must), наличие заголовка первого уровня — рекомендация (should).

W3C WAI формулирует то же для практики доступности: заголовки вкладываются по рангу, а пропуск рангов «can be confusing and should be avoided where possible» ^[12]. Допустимый «скачок» вверх возникает при закрытии подраздела: например, после <h4> может идти <h2>, начинающий новый раздел ^[12].

Корректная структура: пример

Схема-дерево заголовков статьи (пример):

• h1 Заголовки H1–H6
  • h2 Происхождение
  • h2 Механизм
  • h3 Синтаксис
  • h3 Правило последовательности
  • h2 Как проверить
  • h3 Чек-лист

<!-- Плохо -->
<h1><img src="logo.svg" alt="Компания"></h1>  <!-- логотип в H1 на каждой странице -->
<h1>Как выбрать велосипед</h1>
<h4>Рама</h4>                                    <!-- пропуск h2 и h3 -->
<h3 class="promo">Скидка 10 %</h3>               <!-- h3 ради крупного шрифта, это не заголовок раздела -->

<!-- Хорошо -->
<a href="/"><img src="logo.svg" alt="Компания — на главную"></a>
<h1>Как выбрать велосипед</h1>
<h2>Рама</h2>
<h3>Материал рамы</h3>
<h3>Размер рамы</h3>
<h2>Колёса</h2>
<p class="promo">Скидка 10 %</p>                <!-- оформление через CSS -->

Подзаголовки, слоганы и <header>

Для подзаголовка или слогана не нужно ставить <h2> сразу после <h1>. Стандарт предусматривает элемент hgroup, который «represents a heading and related content»: он объединяет заголовок с одним или несколькими абзацами <p>, содержащими подзаголовок, альтернативное название или слоган ^[1].

<hgroup>
  <h1>Заголовки H1–H6</h1>
  <p>Как устроена структура веб-страницы</p>
</hgroup>

Элемент <header> (шапка страницы или раздела) часто путают с заголовком. По стандарту он не является секционным содержимым и не создаёт новый раздел ^[1]; заголовок внутри шапки нужно размечать отдельно элементом <h1>–<h6>.

Кто и как использует заголовки

• Браузеры и вспомогательные технологии. По W3C WAI, браузеры, плагины и вспомогательные технологии используют заголовки для навигации внутри страницы ^[12]. Экранный чтец распознаёт разметку, объявляет текст как заголовок с указанием уровня и позволяет переходить между заголовками ^[14]. По опросу WebAIM (июль–август 2026 года, 1780 ответов), 67,8 % пользователей экранных чтецов при поиске информации на длинной странице сначала переходят по заголовкам, а 88,3 % считают уровни заголовков очень или скорее полезными ^[17].
• Google. Заголовки помогают пользователям ориентироваться на странице, но для поиска, по словам самого Google, порядок заголовков неважен ^[8]. Элементы <h1> и другие заголовки — один из источников, из которых Google автоматически формирует title link, то есть заголовок результата в выдаче ^[9].
• Яндекс. Справка Вебмастера рекомендует выделять заголовки тегами «в соответствии с иерархией документа», поскольку так пользователю проще ориентироваться, а «роботу Яндекса будет проще разобраться со структурой документа» ^[10].

H1, title, заголовок сниппета и og:title

Виды и классификации

По уровню (классификация стандарта WHATWG): шесть уровней от <h1> до <h6>; с атрибутом headingoffset вычисленный уровень может доходить до 9 ^[1].

По роли на странице (практическая классификация на основе MDN и W3C WAI):

• главный заголовок страницы (H1), который описывает её содержание ^[2];
• заголовки разделов (H2) и подразделов (H3–H6), вложенные по рангу ^[12];
• служебные заголовки шаблона — например, <h2> внутри <nav>, связанный с меню через aria-labelledby, чтобы экранный чтец назвал блок навигации ^[2].

Видимые и визуально скрытые. На практике встречаются заголовки, скрытые от зрячих пользователей, но доступные экранным чтецам (например, подпись блока навигации). Это классификация практики, а не норма стандарта. Как относятся к скрытым заголовкам поисковые системы, в использованных справках Google и Яндекса не описано, поэтому статья этот вопрос не оценивает.

Таблица — пример; распределение по типам страниц не задано стандартом.

Как применяется на практике

Как составить H1

Google советует делать главный заголовок страницы заметным и отличимым от остального текста, например поместить его в первый видимый <h1> на странице ^[9]. Если на странице несколько крупных заголовков, Google может взять первый из них ^[9]. MDN рекомендует, чтобы H1 описывал содержание страницы, подобно элементу <title> ^[2]. Отсюда практическое правило: H1 и title должны совпадать по смыслу, но не обязаны совпадать дословно; title часто дополняют названием сайта или уточнением для выдачи (вывод).

Ключевые слова в H1 уместны, если они естественно описывают содержание. Google напоминает, что переспам ключевыми словами (keyword stuffing) нарушает его правила о спаме ^[8].

H2–H6 как план текста

Заголовки второго и третьего уровня работают как оглавление: один раздел — одна мысль, а заголовок называет тему раздела. Это прямо следует из WCAG 2.4.6: заголовки должны описывать тему или назначение ^[13]. Заголовки в форме вопросов («Чем H1 отличается от title?») удобны для блоков FAQ. Утверждать, что такие заголовки специально извлекаются нейросетевым поиском, по открытым первичным источникам нельзя; можно лишь сказать, что Google использует заголовки, чтобы лучше понимать контекст разных частей страницы (заявление 2019 года) ^[18].

Шаблоны типовых страниц (пример)

• Статья: H1 — название; H2 — разделы; H3 — подразделы.
• Карточка товара: H1 — название товара; H2 — «Описание», «Характеристики», «Отзывы».
• Листинг категории: H1 — название категории; карточки товаров в списке — обычно H2 или H3, если у них есть смысловые заголовки.
• Новость: H1 — заголовок новости; лид — абзац или hgroup, а не H2.
• Главная: H1 — то, что описывает сайт или страницу; разделы — H2.

Российские CMS

В конструкторе Tilda тег задаётся в настройках блока в поле «SEO: Тег для заголовка», а в Нулевом блоке — в настройках текстового элемента; справка Tilda пишет, что «тег H1 должен быть на странице строго один», а при двух версиях блока (для компьютера и для мобильных) H1 указывают только в версии для компьютера ^[19]. Это правило платформы строже стандарта HTML, который несколько H1 допускает ^[1].

Типовые ошибки шаблонов

Распространённые ошибки, которые проверяют при аудите (основания — по ссылкам):

• логотип или название сайта в H1 на всех страницах — H1 перестаёт описывать содержание конкретной страницы ^{[2; 9]};
• заголовки меню, виджетов и футера размечены <h2>–<h4> ради оформления, хотя не являются заголовками разделов — нарушение теста 2 техники H42 ^[14];
• H1 скрыт или отсутствует в мобильной версии шаблона (вывод);
• одинаковые H1 на разных страницах сайта (вывод: заголовок перестаёт различать страницы, что противоречит совету Google делать главный заголовок отличимым ^[9]).

Как измерить или проверить

Чек-лист аудита заголовков

1. Есть ли на странице <h1> (WHATWG: хотя бы один заголовок первого уровня — should ^[1]).
2. Сколько H1 (стандарт допускает несколько ^[1], практика доступности — один ^[2]).
3. Есть ли пропуски уровней при углублении (h2 → h4) ^{[1; 12]}.
4. Есть ли пустые заголовки (элемент без текста).
5. Есть ли заголовки, состоящие только из изображения: тогда текстом заголовка служит alt, и его нужно проверить.
6. Описательны ли заголовки (WCAG 2.4.6 ^[13]).
7. Используется ли разметка заголовков только для заголовков (H42, тесты 1 и 2 ^[14]).
8. Совпадает ли H1 по смыслу с title ^{[2; 9]}.
9. Не дублируются ли H1 между страницами сайта.
10. Длина — как ориентир удобочитаемости. Лимитов длины H1 в документации Google, Яндекса и в стандарте HTML нет: в открытых справках ^{[1; 8; 9; 10]} такая норма не приводится.

Инструменты

• Просмотр кода и инструменты разработчика браузера — поиск элементов h1–h6; панель дерева доступности (если она есть в браузере) помогает увидеть, распознаны ли заголовки и их уровни (вывод).
• Экранный чтец — режим перехода по заголовкам ^[14].
• Валидаторы, расширения и SEO-краулеры — массовая проверка шаблонов (иллюстрация практики; конкретные сервисы статья не оценивает).

Полезные метрики для сайта: число H1 на шаблон, доля страниц без H1, доля страниц с пропусками уровней.

Масштаб проблемы

WebAIM ежегодно проверяет главные страницы миллиона сайтов (список на основе рейтинга Tranco). В отчёте 2026 года (данные за февраль 2026 года) найдено почти 30 млн заголовков, в среднем 29,9 на главную страницу ^[16]. У 18,1 % главных страниц больше одного <h1> (в 2025 году — 16,3 %), у 41,8 % есть пропуски уровней (в 2025 году — 39 %), у 7,5 % заголовков нет вовсе (в 2025 году — 9,8 %) ^[16].

Логика проверки структуры заголовков

Мини-инструмент «Структура заголовков» для этой страницы готовится; ниже — логика проверки, применимая и вручную. На входе — URL или фрагмент HTML; на выходе — дерево заголовков h1–h6 с отступами по уровню и title рядом с H1 для сравнения. Флаги:

• нет H1 — предупреждение ^[1];
• H1 больше одного — предупреждение с пометкой «допустимо стандартом, рекомендуется один» ^{[1; 2]};
• пропуск уровня (h2 → h4) — несоответствие стандарту ^[1];
• пустой заголовок;
• заголовок только из изображения — проверить alt;
• первый H1 не совпадает с title — информативно, не ошибка;
• одинаковый текст у нескольких заголовков;
• при заданном headingoffset — вычисленный уровень с пометкой ^[1].

Такая проверка показывает формальную структуру и не оценивает влияние заголовков на позиции.

Ошибки, ограничения и спорные вопросы

Один H1 или несколько

Заявление Google сделано 3 октября 2019 года и относится к историческим данным (старше трёх лет); пересказано изданием Search Engine Land ^[18]. Вывод: для поиска число H1 некритично, для доступности и ясности структуры лучше один H1. Утверждение «по стандарту H1 должен быть один» неверно.

Влияют ли заголовки на ранжирование

Google SEO Starter Guide включает «число и порядок заголовков» в перечень того, на чём не стоит фокусироваться: семантический порядок полезен экранным чтецам, но для Google Search «it doesn't matter if you're using them out of order», а идеального числа заголовков нет ^[8]. Объяснение Google: веб в целом не является валидным HTML, поэтому поиск редко может опираться на семантику из спецификации ^[8]. Яндекс говорит о другом эффекте — правильная иерархия помогает роботу разобраться со структурой документа ^[10]. Формулировки вроде «H1 — важнейший фактор ранжирования» или «вес H1 в N раз больше» в официальной документации не подтверждаются.

Заголовки для оформления

MDN прямо пишет: не используйте элементы заголовков для изменения размера текста, применяйте свойство CSS font-size ^[2]. Пропуск уровня ради «подходящего» размера шрифта — частая причина нарушений последовательности.

Миф об автоматическом понижении H1 в <section>

Алгоритм outline, по которому <h1> внутри <section> или <article> якобы становился заголовком нижнего уровня, браузерами не был реализован и удалён из стандарта в 2022 году ^{[6; 7]}. Уровень определяется цифрой в имени элемента (и headingoffset, если он задан) ^[1].

Путаница терминов

• <header> — шапка страницы или раздела, а не заголовок ^[1].
• H1 — не title: у них разное место в документе и разные задачи (см. таблицу выше) ^{[1; 3]}.
• Слово «тег» допустимо как разговорное; точнее — «элемент».

Длина H1

Нормы вроде «H1 не длиннее 60–70 символов» встречаются в блогах SEO-сервисов, но в стандарте HTML, справках Google и Яндекса, использованных в статье, их нет ^{[1; 8; 9; 10]}. Для title справка Яндекса говорит лишь, что длинные заголовки в выдаче могут быть укорочены ^[11].

Переспам и одинаковые заголовки

Перечисление ключевых слов в заголовках подпадает под общий запрет переспама в правилах Google ^[8]. Одинаковые H1 на разных страницах мешают различать страницы — это вывод; термин «каннибализация» относится к практике и в официальных источниках не определён.

Новые атрибуты headingoffset и headingreset

Атрибуты описаны в действующей редакции HTML Living Standard ^[1], но как их поддерживают браузеры и экранные чтецы, в использованных источниках не описано, и в этой статье поддержка не утверждается. До проверки поддержки надёжнее задавать уровень цифрой в имени элемента (вывод).

Ограничение WCAG

Критерий 2.4.6 «Заголовки и метки» не требует, чтобы на странице были заголовки: он требует, чтобы имеющиеся заголовки описывали тему или назначение ^[13]. Корректность разметки — то есть что визуальный заголовок размечен как заголовок — относится к критерию 1.3.1 ^[13].

Правовой аспект

Правовое значение разметки заголовков связано со стандартами цифровой доступности. В WCAG 2.2 к ним относятся критерии 1.3.1 «Info and Relationships» (уровень A), 2.4.6 «Headings and Labels» (уровень AA) и 2.4.10 «Section Headings» (уровень AAA) ^{[12; 13]}. Техника H42 — достаточный способ выполнить критерий 1.3.1 для заголовков ^[14].

В России требования доступности интернет-ресурсов задаёт национальный стандарт ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности». По данным официального портала Росстандарта (на 14.10.2026), стандарт имеет статус «Действует», утверждён приказом от 29.08.2019 № 589-ст, введён в действие с 01.04.2020 и заменил ГОСТ Р 52872-2012; к нему выпущена поправка (ИУС № 3-2020) ^[15]. За основу при разработке стандарта была взята WCAG 2.1 ^[21].

Критерий 1.3.1 «Информация и смысловые связи» (уровень А) этого стандарта требует, чтобы информация, структура и смысловые связи, представляемые пользователям, могли быть программно определены или были доступны в текстовой версии ^[22]. Разметка заголовков элементами <h1>–<h6> — один из способов выполнить это требование (вывод: ГОСТ основан на WCAG 2.1 ^[21], а в WCAG техника H42 признана достаточной для критерия 1.3.1 ^[14]). Вопрос об обязательности стандарта для конкретных организаций в этой статье не рассматривается; раздел не является юридической консультацией.

Частые вопросы

Связанные термины

• Тег title
• Сниппет
• Мета-описание
• Open Graph
• Структура сайта
• Alt-текст изображений
• SEO-аудит
• Переспам
• Заголовок
• GEO (оптимизация под генеративный поиск)