Тег h1 размечает главный заголовок страницы - тот, который отражает содержание страницы целиком. Тег парный: у него есть и открывающий, и закрывающий тег, между ними прописывается текст заголовка. Собственных атрибутов у h1 нет, ему доступны только глобальные - class, id, lang и остальные, которые понимает любой элемент.
<h1>Как выбрать велосипед</h1>
<p>Разбираем раму, тормоза и трансмиссию.</p>Пример: как браузер выводит h1 без единой строчки CSS
Как выбрать велосипед
Разбираем раму, тормоза и трансмиссию.
В этой статье
Чем тег h1 отличается от title
Эти два тега путают чаще всего, и понятно почему: оба задают название страницы, оба на ней по одному, оба важны для поиска. Разница в том, где они прописываются и кто их видит.
Тег title находится в head и на самой странице не показывается: браузер выводит его на вкладке, а поисковик - заголовком результата в выдаче. Тег h1 находится в body и читается как обычный текст страницы.
<head>
<title>Как выбрать велосипед: рама, тормоза, трансмиссия</title>
</head>
<body>
<h1>Как выбрать велосипед</h1>
</body>Тексты этих тегов не обязаны совпадать, и обычно не совпадают. В title помещают более длинную формулировку, иногда с названием сайта, потому что читатель видит её в выдаче среди чужих ссылок и решает, заходить ли. В h1 формулировка короче: читатель уже на странице, и ему достаточно названия того, что он открыл.
Пример: как один и тот же материал подписан в title и в h1
Как выбрать велосипед
Разбираем раму, тормоза и трансмиссию.
Сверху - макет вкладки браузера с текстом title, снизу - сама страница с h1.
Сколько тегов h1 может быть на странице
В материалах по продвижению правило звучит категорично: h1 на странице строго один. В спецификации такого запрета нет - и вот что там на самом деле написано.
Стандарт допускает несколько элементов h1 на одной странице при условии, что они не вложены друг в друга. При этом MDN прямо называет такую разметку не лучшей практикой и рекомендует один h1, описывающий содержимое страницы.
Расхождение осталось с тех времён, когда предполагался алгоритм структуры документа: считалось, что h1 внутри каждого section получит свой уровень автоматически, по глубине вложенности. Алгоритм так и не реализовал ни один браузер и ни одна программа чтения с экрана - подробный разбор этого есть в статье There Is No Document Outline Algorithm Адриана Роселли. Уровень заголовка по-прежнему определяет только цифра в названии тега.
Поэтому программа чтения с экрана строит из заголовков плоский список - что-то вроде оглавления, по которому читатель перемещается, не просматривая страницу целиком. Два h1 дают в этом списке два равнозначных названия страницы, и читателю приходится самому решать, какое из них главное. Соберите структуру в конструкторе ниже и посмотрите, что получается в таком списке.
Нажимайте кнопки, чтобы добавлять заголовки. Слева появится разметка, справа - список заголовков, который построит программа чтения с экрана.
Разметка страницы
Пока ни одного заголовка.
Список заголовков
Список пуст.
Добавьте первый заголовок, чтобы увидеть разбор структуры.
Структура начинается не с h1. Читатель откроет список заголовков и не найдёт в нём названия страницы - первым пунктом окажется название раздела.
Уровень пропущен: после h сразу идёт h. В списке заголовков появляется провал, и читатель ищет недостающий пункт, которого нет.
На странице больше одного заголовка первого уровня. Спецификация это разрешает, но в списке заголовков получается несколько равнозначных названий страницы, и какое из них главное, читателю придётся решать самому.
Порядок верный: структура начинается с единственного h1, и каждый следующий уровень либо на единицу глубже предыдущего, либо возвращается к любому из верхних.
Практический вывод из этого простой: один h1 на страницу, и он описывает то, чему посвящена эта страница.. Базовый разбор уровней заголовков с задачами и проверкой есть в уроке курса Сколько h1 может быть на странице.
Что можно поместить внутрь h1
Спецификация разрешает h1 только фразовое содержимое - строчные элементы, из которых состоит текст. Блочные элементы вроде div, p или section внутрь заголовка не помещают, другой заголовок внутрь заголовка - тоже. А вот ссылка, картинка или span валидны, и вопрос не в том, можно ли, а в том, зачем.
<h1>Как выбрать <span class="accent">велосипед</span></h1>
<h1><a href="/velosipedy/">Как выбрать велосипед</a></h1>
<h1><h2>Так нельзя</h2></h1>Ссылка внутри заголовка чаще всего нужна не на самой статье, а в списке материалов: там заголовок карточки ведёт на её страницу. На странице самой статьи h1 ссылкой на себя же делать незачем.
Картинка внутрь h1 тоже помещается, и обычно это логотип на главной. Отдельно отметим: доступным названием заголовка в этом случае становится текст атрибута alt, поэтому пустой alt оставит заголовок вообще без текста. И стоит честно ответить себе, описывает ли логотип содержимое главной страницы - обычно он описывает сайт целиком, а это не одно и то же.
Пример: ссылка и выделенная часть текста внутри h1
Как выбрать велосипед
Как выбрать велосипед
Первый заголовок подсвечивает часть текста через span, второй целиком сделан ссылкой.
Ниже - что из частых кандидатов валидно внутри h1 и когда в этом есть смысл.
| Элемент | Валидно | Когда есть смысл |
|---|---|---|
<span> | да | Выделить часть заголовка оформлением |
<a> | да | Заголовок карточки в списке материалов |
<img> | да | Логотип на главной, с осмысленным alt |
<br> | да | Почти никогда: на узком экране перенос окажется в случайном месте |
<strong>, <b> | да | Незачем: h1 и так самый значимый заголовок страницы |
<p>, <div> | нет | Блочные элементы внутрь заголовка не помещают |
<h2> и другие заголовки | нет | Заголовок внутри заголовка - невалидная разметка |
Почему h1 внутри section выглядел мельче
Это поведение годами сбивало с толку: один и тот же h1 в разных местах страницы выводился разным размером, хотя никакого CSS к нему не применяли. Причина была в самом стандарте, и её уже убрали.
До мая 2025 стандарт предписывал браузерам выводить h1 внутри section, article, aside или nav так же, как h2 - меньшим шрифтом и с другими отступами, а на уровень глубже - как h3, и так далее. Это был остаток той же идеи с автоматическим определением уровня по вложенности. Контекстно-зависимый стиль из стандарта удалили, и h1 теперь выводится одинаково, где бы он ни находился.
Браузеры, которые ещё применяют старое поведение, лечатся одним правилом. Селектор :where() здесь удобен тем, что у него нулевая специфичность и он не перебьёт ваши собственные стили заголовка.
:where(h1) {
margin-block: 0.67em;
font-size: 2em;
}Пример: как выглядел h1 внутри section раньше и как выглядит сейчас
Старое поведение
Выбор рамы
Текущее поведение
Выбор рамы
Левая половина - макет: прежний размер воспроизведён здесь правилом CSS, потому что современный браузер сам его уже не применяет.
Практический вывод тот же, что и у любого другого тега: размер шрифта задают стилями, а уровень заголовка выбирают по смыслу. Полагаться на то, каким h1 окажется без CSS, не стоит в любом случае.
Отдельно о свежем: в стандарт добавили глобальные атрибуты headingoffset и headingreset, которые сдвигают вычисленный уровень заголовка, не меняя сам тег. Применять их пока рано - на момент написания статьи они не поддерживаются ни одним браузером в обычной сборке, только в Firefox Nightly за флагом. Следите за поддержкой, но разметку на них не стройте.
Частые ошибки
Большая часть ошибок с h1 происходит не из-за незнания синтаксиса - он здесь предельно простой, - а из-за попыток применить заголовок не по назначению: ради размера шрифта, ради ключевых слов, ради красивой вёрстки.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
На странице нет h1 | В списке заголовков нет названия страницы, читатель начинает с середины структуры | Добавить один h1, описывающий содержимое страницы |
h1 применён ради крупного шрифта | Обычный текст объявляется заголовком первого уровня, структура страницы ломается | Применить тег по смыслу, а размер задать через font-size |
После h1 сразу идёт h3 | В списке заголовков появляется провал на пропущенном уровне | Не пропускать уровни: за h1 идёт h2 |
h1 скрыт через display: none ради ключевых слов | Скрытый заголовок не читает и программа чтения с экрана - пользы нет ни для кого | Убрать скрытый заголовок и прописать нормальный видимый |
Заголовок разбит на строки тегом <br> | На узком экране перенос оказывается в случайном месте фразы | Управлять переносами стилями, а не разметкой |
