Создание полезных сайтов
H1, H2 или H3: как составить и проверить структуру страницы
Начните с вопросов читателя. Затем обозначьте разделы настоящими заголовками и проверьте опубликованную страницу, а не только редактор.
1. Выбирайте уровень по задаче раздела
Для обычной статьи или страницы услуги используйте один H1 для главной темы, H2 для основных разделов и H3 для подраздела внутри H2. Внешний вид настраивайте стилями. Жирный абзац не становится заголовком только потому, что выделяется. Элементы заголовков описаны в MDN, их иерархия — в руководстве W3C WAI.
Представим вымышленную ремонтную мастерскую, которая готовит инструкцию для посетителей. Читателю нужно понять, стоит ли приходить, что взять с собой и как записаться. Сначала подготовьте эти ответы, а затем меняйте размер шрифта. Пример ниже — редакционное упражнение, а не сведения о действующей мастерской.
2. Замените расплывчатые названия вопросами читателя
До: H1 «Добро пожаловать»; H3 «Информация»; H2 «Дополнительная информация»; H4 «Контакты». Читателю приходится угадывать, где список принимаемых вещей и инструкция по записи. Простая смена уровней не сделает названия понятнее.
После: расположите следующие заголовки в порядке чтения. Подразделы H3 относятся к разделу «Какие вещи можно принести?». «Как записаться» начинает новый основной раздел, поэтому получает H2.
- H1 — Визит в ремонтную мастерскую
- H2 — Какие вещи можно принести?
- H3 — Небольшие электроприборы
- H3 — Одежда и текстиль
- H2 — Как записаться
- H2 — Что взять с собой
- H2 — Если вещь не удастся починить
3. Разберите два неочевидных случая
Новый подраздел внутри H2 обычно начинается с H3, без скачка сразу к H4. Возврат с H3 на H2 завершает подраздел и открывает следующий основной раздел; это не ошибка пропущенного уровня. Такое различие описывает W3C WAI.
В примере «Одежда и текстиль» находится на одном уровне с «Небольшими электроприборами»: оба заголовка — H3. Если «Выбор времени» — подраздел внутри «Как записаться», ему тоже нужен H3. Если эти слова стоят на кнопке записи, это подпись элемента управления, а не автоматически ещё один заголовок.
4. Проверка в браузере: одинаковый вид, разный смысл
21 октября 2026 года Coru проверил собственную небольшую HTML-страницу в Chrome 155.0.8059.12. На ней были абзац и H2 с одинаковым текстом «What to bring», одинаковым жирным шрифтом размером 24 пикселя, межстрочным интервалом и отступами. В дереве доступности браузер распознал заголовком второго уровня только образец H2.
Чтобы повторить проверку на своей странице, нажмите правой кнопкой на название раздела и выберите «Просмотреть код» или Inspect. Посмотрите на выбранный элемент в панели Elements: это h2 или h3 либо оформленный стилями абзац? В панели Accessibility проверьте вычисленные роль и уровень. Расположение панели может различаться между версиями браузера.
Это проверка семантики в браузере, а не исследование с пользователями экранных дикторов. Она показывает, почему по одному скриншоту нельзя установить, размечено ли название раздела как заголовок. Проверка не подтверждает доступность всей страницы.
5. Карточка проверки опубликованной страницы
В визуальном редакторе используйте выбор заголовка или стиля абзаца, затем проверьте готовую страницу. Если тема сама добавляет H1, начинайте основные разделы статьи с H2. Не считайте показание панели редактора доказательством: смотрите итоговую разметку.
- URL страницы и основная задача читателя: ___.
- Главный заголовок: ___. Добавляет ли шаблон H1 перед текстом статьи?
- Названия разделов по порядку: ___. Можно ли по структуре примера найти принимаемые вещи, запись и подготовку к визиту?
- Для каждого подраздела: родительский раздел ___; выбранный уровень ___.
- Проверка подозрительной жирной строки: реальный элемент ___; вычисленная роль ___; уровень ___.
- После сохранения и перезагрузки публичной страницы: главный заголовок есть ___; порядок разделов верен ___; заголовок не продублирован ___; на узком экране всё читается ___.
Когда структура готова
Сохраните структуру, если названия помогают найти ответы, подразделы относятся к нужным разделам, а проверенная разметка передаёт эту связь. Очень короткой странице подразделы могут не понадобиться. Не создавайте пустые разделы ради использования всех уровней.
Если результат неожиданен, отправьте через форму обратной связи текст заголовка, ожидаемый уровень и найденный элемент. Не присылайте закрытые URL и данные аккаунтов. Реальные вопросы помогут выбрать следующий пример.