H1, H2 и H3: как не нарушить логику структуры документа

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

Дата актуальности: 22 июля 2026 г.

Заголовки H1–H6 описывают структуру HTML-документа от общего к частному. Номер уровня показывает не визуальный размер, а положение блока в смысловом дереве. Поэтому заголовок H3 не должен использоваться только потому, что он выглядит компактнее H2. Размер, цвет и начертание задаются стилями, а уровень выбирается по логике содержания.

H1 — главный заголовок документа. Он отвечает на вопрос, о чём страница целиком, и обычно формулируется один раз. Для статьи о типографике H1 может звучать так: «Как выбрать шрифт для сайта: практическое руководство». Все последующие разделы должны уточнять эту тему, а не уводить читателя в независимые направления.

H2 обозначает раздел, который раскрывает отдельный аспект главной темы. В статье о выборе шрифта такими разделами могут быть «Какие задачи решает шрифт», «Как оценить читаемость» и «Как проверить сочетание гарнитур». Каждый H2 должен быть понятен сам по себе и обещать конкретное содержание, а не повторять H1 другими словами.

H3 нужен, когда раздел H2 содержит несколько связанных, но самостоятельных подтем. Например, внутри H2 «Как оценить читаемость» можно выделить H3 «Размер основного текста», «Межстрочный интервал» и «Контраст текста и фона». Каждый такой подпункт относится к родительскому разделу и не должен существовать в структуре изолированно.

Логичная структура документа похожа на оглавление книги или дерево разделов. Сначала читатель видит общую тему, затем крупные вопросы, после этого — детали. Если после H2 сразу появляется H4, пропущен промежуточный уровень: читателю сложнее понять, к какому разделу относится этот фрагмент, а навигация по документу становится менее предсказуемой.

Последовательность уровней не обязана быть механической в каждом коротком материале. Если разделу не нужны подпункты, после H2 можно сразу перейти к следующему H2. Однако при наличии вложенных тем следует сохранять связь: H3 относится к ближайшему H2, а H4 — к ближайшему H3. Номер должен отражать вложенность, а не размер шрифта.

Хороший H1 точно совпадает с поисковым интентом и ожиданием посетителя. Он сообщает, что именно получит читатель: объяснение, инструкцию, сравнение или список рекомендаций. Формулировка должна быть конкретной, естественной и достаточно информативной. Заголовок «Шрифты» слишком широк, а «Как подобрать шрифт для логотипа с учётом характера бренда» задаёт ясные границы материала.

Основной ключевой запрос уместно использовать в H1, если он звучит естественно. Не стоит добавлять в один заголовок несколько близких фраз, коммерческие уточнения и длинный перечень преимуществ. Для поисковой оптимизации важнее точное раскрытие темы на странице, чем повтор ключевых слов. Title и H1 могут быть близкими по смыслу, но не обязаны совпадать дословно.

Слабый вариант: «Заголовки и всё о них». Он не объясняет, какие именно заголовки рассматриваются и какую задачу решит статья. Сильный вариант: «H1, H2 и H3: как не нарушить логику структуры документа». В нём названы конкретные элементы и сформулирована практическая проблема — сохранение правильной иерархии.

Разделяйте материал по смыслу, а не по длине абзацев. Если H2 можно раскрыть несколькими абзацами без потери ясности, дополнительные H3 не нужны. Если внутри крупного раздела появляются разные критерии, сценарии или этапы, H3 помогает сделать навигацию прозрачной. Важно, чтобы подпункты одного уровня были сопоставимы по масштабу и форме.

Представьте, что H2 — это папка, а H3 — документы внутри неё. В разделе «Как выбрать шрифт для интерфейса» можно разместить подпункты о размере текста, длине строки, начертаниях и состоянии элементов. Но вопрос о лицензии гарнитуры лучше вынести в отдельный H2, если он занимает значительную часть статьи и имеет собственную логику.

Заголовок оправдан, когда после него следует отдельная мысль, которую читатель может найти через оглавление. Если каждый короткий абзац получает H3, документ становится дробным и визуально шумным. Для небольших акцентов используйте обычный абзац, список или выделение средствами дизайна, не меняя семантический уровень.

Допустим, нужно написать материал «Как выбрать шрифт для бренда». Логичная структура может выглядеть так: H1 задаёт тему выбора шрифта для бренда; H2 объясняет роль типографики в айдентике; следующий H2 описывает критерии выбора; внутри него H3 раскрывают характер бренда, читаемость, языковую поддержку и технические ограничения; отдельный H2 посвящён проверке сочетаний и финальному выбору.

В этом примере H3 не конкурируют с H2 и не образуют самостоятельные ветви. Они отвечают на более узкие вопросы внутри одного критериального раздела. Если же статья посвящена только языковой поддержке шрифтов, этот вопрос может стать отдельной темой H1, а сведения о кириллице, диакритике и символах — её H2 и H3.

Заголовки помогают поисковым системам определить основные темы страницы и взаимосвязь между ними. Они также улучшают сканирование текста: пользователь может быстро понять, есть ли в материале нужный ответ. При этом один набор H1–H3 не заменяет качественный текст. Семантическая структура работает вместе с понятными абзацами, релевантными формулировками, внутренней навигацией и удобной вёрсткой.

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

Ошибки в заголовках обычно появляются, когда автор думает только о внешнем оформлении. Текст может выглядеть аккуратно в редакторе, но при просмотре оглавления или чтении с экранным диктором становится очевидно, что уровни выбраны непоследовательно. Исправлять такую структуру лучше до публикации, пока разделы легко переставить и перегруппировать.

Если дизайнеру нужен крупный текст, это не повод превращать его в H1. Семантический тег описывает роль элемента, а CSS отвечает за его вид. Заголовок карточки, подзаголовок баннера или название блока может быть обычным текстом либо подходящим уровнем заголовка — решение зависит от места элемента в структуре всей страницы.

Фразы вроде «Важно знать», «Полезные советы» и «Итоги» слишком общие, если рядом нет уточнения. Лучше назвать конкретный предмет раздела: «Как проверить читаемость кириллического шрифта» или «Что проверить перед публикацией макета». Такой заголовок полезен и человеку, и поисковой системе, потому что сразу обозначает информационный ответ.

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

Обычно для страницы достаточно одного H1, который обозначает её основную тему. Несколько элементов верхнего уровня могут запутать структуру и затруднить понимание документа. Если на странице есть крупные блоки, оформляйте их как H2, а не как дополнительные H1, если они не являются самостоятельными документами.

Порядок уровней должен отражать вложенность. После H1 обычно идут H2, а H3 размещаются внутри соответствующего H2. Пропуск уровня, например переход от H2 к H4, ухудшает логику навигации. Если промежуточный уровень не нужен, лучше изменить структуру, чем добавлять формальный заголовок без содержания.

Нет. Размер заголовка задаётся стилями, а H2 определяет смысловое место элемента в документе. Для крупной подписи можно изменить шрифт, насыщенность, интерлиньяж и отступы. Используйте H2 только тогда, когда текст действительно начинает раздел второго уровня.

Нет, если материал раскрывается в нескольких самостоятельных H2 без внутренних подтем. H3 полезен не сам по себе, а как средство группировки содержания. В короткой статье лишние уровни могут создать ощущение дробности и усложнить чтение, поэтому используйте их только при реальной необходимости.

Нет. Основной запрос достаточно использовать там, где он естественно описывает тему, например в H1 или одном из важных разделов. В остальных заголовках применяйте синонимы и тематические формулировки: иерархия заголовков, семантическая разметка, структура статьи, читаемость и навигация. Смысловое покрытие важнее повторов.

Оформите элемент обычным текстом и задайте ему нужный вид через стили. Заголовок должен сообщать о начале смыслового раздела, а не служить универсальным инструментом визуального акцента. Такой подход сохраняет корректную структуру, улучшает доступность и позволяет свободно менять дизайн без изменения семантики страницы.

H1 отвечает за тему всей страницы, H2 формирует крупные разделы, а H3 раскрывает связанные подпункты. Если строить заголовки от общего к частному, проверять их как оглавление и отделять семантику от дизайна, документ будет понятным, доступным и удобным для SEO-сканирования.