H1–H6: как выстроить понятную иерархию заголовков
Как распределить H1–H6 по смыслу страницы, отделить уровень заголовка от размера шрифта и проверить структуру услуги, статьи и карточек на сайте.
Заголовки обозначают смысловую структуру документа. H1 представляет главную тему, H2 — основные разделы, следующие уровни — вложенные части. Для обычной страницы удобно использовать один явный главный заголовок. Размер и оформление задаются стилями отдельно: маленькая подпись не становится H4 только из-за размера, а крупный рекламный текст не обязан быть главным заголовком.
Сначала составьте план без оформления
Запишите тему страницы и последовательность вопросов, которые она раскрывает. Для услуги это могут быть подходящие задачи, состав работы, этапы и результат. Для инструкции — подготовка, действия и проверка. После этого назначьте уровни заголовков. Такой порядок помогает избежать структуры, где разные размеры шрифта выбраны ради красоты, но не объясняют отношения разделов. Читатель должен понимать содержание по одному списку заголовков, даже если изображения и декоративные элементы временно убрать.
Сделайте главную тему однозначной
H1 должен объяснять, куда попал посетитель. Для статьи назовите вопрос или результат, для услуги — конкретное предложение. Не используйте одно общее приветствие на всех страницах вместо их названий. На обычном документе один явный H1 упрощает контроль и чтение структуры. Если шаблон уже выводит название материала, не добавляйте второй одинаковый заголовок в редакторе. Проверьте также скрытые мобильные версии: визуально невидимые копии иногда создают лишнее повторение в разметке.
Соблюдайте вложенность по смыслу
Основной раздел получает свой уровень, а уточнение внутри него — следующий. Не перескакивайте между H2 и H5 только потому, что так выглядят готовые стили. Если нужно уменьшить шрифт, измените класс оформления. Внутри карточки заголовок выбирается с учётом общего контекста списка. Не превращайте каждую короткую строку в отдельный раздел: избыточное дробление делает чтение таким же трудным, как длинный текст без ориентиров. Уровень должен отражать реальную связь частей содержания.
Пишите заголовки, которые помогают найти ответ
Фраза «Важная информация» менее полезна, чем «Что проверить перед оплатой». Конкретный подзаголовок позволяет быстро перейти к нужной задаче. Не вставляйте основной запрос в каждый раздел: это создаёт повторы и не улучшает объяснение. Избегайте обещаний, которые подраздел не выполняет. Если под заголовком о проверке стоит только определение термина, измените содержание или название. Заголовок и последующий текст должны работать как понятная пара, а не как независимые SEO-заготовки.
Проверьте мобильное чтение
Длинный H1 может занимать несколько строк, поэтому настройте размер, интервал и ширину с учётом экрана. Не обрезайте название ради фиксированной высоты карточки, если теряется смысл. Проверьте увеличенный шрифт и длинные слова. При этом уменьшение размера не должно делать заголовок неотличимым от абзаца. Используйте последовательную типографическую шкалу, но допускайте различия между героем и длинной статьёй. Семантический уровень одинаков, а композиционная задача и доступное место могут различаться.
Проверяйте шаблоны после новых публикаций
Просмотрите структуру нескольких типов страниц и крайних случаев: длинное название, много разделов, отсутствие необязательного блока. Убедитесь, что оглавление ведёт к нужным заголовкам и неподвижный хедер не закрывает их после перехода. Для редактора полезна краткая инструкция с примерами уровней и запретом использовать заголовки только ради размера. Такая договорённость сохраняет порядок при росте базы знаний и уменьшает количество ручных исправлений после каждого нового материала.
Вопросы и ответы
Размер H1 обязан быть одинаковым на всех страницах?
Нет. Семантический уровень и визуальный размер связаны дизайном, но не тождественны. Сохраняйте понятную систему, адаптируя композицию к типу страницы и экрану.
Можно использовать H3 сразу после H1?
Для понятной структуры обычно лучше не пропускать уровень без причины. Сначала проверьте смысловую вложенность, а нужный размер текста задайте стилями.
