Заголовки в HTML - это не просто крупный жирный текст а способ показать браузеру и поисковику, как устроена страница изнутри. Тегов для этого шесть - от <h1> до <h6>: чем меньше цифра, тем выше уровень важности блока текста.
В этом уроке
Попробуй убрать один из уровней или поменять их местами - результат справа сразу покажет, как меняется размер и порядок.
Что такое уровни заголовков h1-h6
Уровень заголовка должен отражать реальную структуру страницы, а не то, каким крупным должен получиться текст. Если пропустить уровни ради нужного размера - структура страницы получит (дыру), которая собьёт с толку и поисковик и программы для чтения с экрана.
<h1>Название статьи</h1>
<h2>Первый раздел</h2>Уровень отражает реальную вложенность: раздел идёт сразу после главного заголовка.
<h1>Название статьи</h1>
<h4>Первый раздел</h4>Уровень выбран ради размера шрифта помельче, а не по структуре - между <h1> и <h4> пропущены два уровня.
Сколько <h1> может быть на странице
На странице должен быть только один <h1> - это её главный заголовок. Несколько <h1> формально не сломают страницу, но лишают её единственной понятной точки входа - и для посетителя, и для поисковика, и для программы чтения с экрана.
<h1>Как создать блог с нуля</h1> - один главный заголовок на всю страницу.
<h1>Как создать блог с нуля</h1>...<h1>Похожие статьи</h1> - второй <h1> спорит с первым за звание главного заголовка страницы.
Какой размер у заголовков без единой строчки CSS
Даже без единой строчки CSS браузер уже задаёт заголовкам разные размеры по умолчанию: <h1> - примерно 32px, <h2> - около 24px, <h3> - около 18.72px, дальше ещё меньше. Эти размеры - просто ориентир, совпадающий с уровнем важности. Реальный размер в проекте всё равно настраивают через CSS-свойство font-size, а не сменой уровня заголовка.
<h2>Заголовок раздела</h2> + CSS-правило h2 { font-size: 28px; } - структура и размер настроены каждый своим инструментом.
<h4>Заголовок раздела</h4> вместо <h2> только потому, что нужен заголовок помельче - размер поменяется, но структура страницы станет неправильной.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Пропускать уровни ради нужного размера (например, сразу с <h1> на <h4>) |
В структуре появляется «дыра», которая сбивает с толку поисковик и программы для чтения с экрана | Выбирать уровень по структуре, а размер настраивать через CSS |
Ставить на странице несколько <h1> |
Теряется единственный главный заголовок - понятная точка входа для посетителя, поисковика и скринридера | Оставлять только один <h1> на страницу |
| Выбирать заголовок по внешнему виду, а не по смыслу вложенности | Структура документа перестаёт совпадать с тем, что видно на экране | Сначала определить реальную вложенность разделов, потом расставить уровни |
| Использовать тег заголовка там, где нужен просто крупный или жирный текст без реальной структуры | В структуре страницы появляется лишний, ничего не значащий «раздел» | Для визуального акцента без структурного смысла настраивать обычный текст через CSS, а не тег заголовка |
Шпаргалка
| Термин | Значение |
|---|---|
<h1>-<h6> | Шесть уровней заголовков: от самого важного до самого мелкого |
| Уровень заголовка | Отражает структуру раздела, а не желаемый размер шрифта |
Один <h1> на странице | Главный заголовок - должен быть только один |
| Размер по умолчанию | <h1> ~32px, <h2> ~24px, <h3> ~18.72px, дальше меньше |
| Изменение размера | Через CSS (font-size), а не смену уровня заголовка |
Коротко: отвечаем на вопросы
Влияют ли заголовки h1-h6 напрямую на позиции в поиске?
Прямого магического эффекта нет: в отдельном SEO-эксперименте замена <h2> на <h1> без других изменений не дала заметной разницы в трафике. Но чёткая структура заголовков помогает и посетителям, и поисковику понять страницу - а это уже влияет на качество в целом.
Как заголовки помогают пользователям программ чтения с экрана?
По опросам WebAIM, для людей, которые пользуются такими программами, навигация по заголовкам - самый главный способ перемещаться по странице: они «прыгают» от заголовка к заголовку, а не читают всё подряд. Поэтому пропущенные уровни или заголовки не по смыслу мешают не только поисковику, но и живым людям.
