<h1>
- 25 января 2023
Тег <h1>
задаёт заголовок первого уровня, который обычно используется для названия страницы или раздела. Этот заголовок является самым важным на странице.
Синтаксис тега <h1>
<h1>Заголовок первого уровня</h1>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <h1>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Заголовок страницы:
<h1>Название страницы</h1>
Заголовок сайта:
<header>
<h1>Название сайта</h1>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
Заголовок статьи:
<article>
<header>
<h1>Заголовок статьи</h1>
<p>Дата публикации: 1 января 2023 года</p>
</header>
<p>Содержимое статьи...</p>
</article>
Для чего использовать тег <h1>
- Определить главный заголовок страницы.
- Создать заголовок для раздела или блока страницы.
- Отобразить заголовок для статьи или поста в блоге.
- Создать якорную ссылку — если использовать вместе с атрибутом
id
. - Использовать в качестве логотипа сайта.
Атрибуты тега
Тег <h1>
не имеет специфичных контентных атрибутов, но поддерживает все глобальные атрибуты HTML.
Ограничения
- На странице может быть только один тег
<h1>
, поскольку он обозначает самый важный заголовок. - Не следует использовать тег
<h1>
для стилизации текста или для создания визуальных эффектов. - Размер заголовка должен быть больше, чем у предыдущего по уровню заголовка. Например, заголовок
[<h2>](blog/html-tags/h2)
должен быть меньше, чем заголовок<h1>
.
Нюансы
Использование тега <h1>
внутри тегов <article>
, <section>
, <aside>
, <nav>
, <header>
и <footer>
не является ошибкой и может иметь свой смысл в контексте страницы.
Поддержка браузерами
Тег <h1>
поддерживается всеми современными браузерами.
Альтернативные теги
Тег <h1>
не имеет прямых альтернативных тегов, но для создания заголовков различных уровней используются теги <h2>
–<h6>
.
Чем заменить тег
Если тег <h1>
используется для стилистического оформления заголовков, то его можно заменить на более семантические теги в зависимости от типа заголовка. Например:
- Для заголовка страницы можно использовать тег
<header>
. - Для названия раздела можно использовать тег
<h2>
, а для подразделов —<h3>
,<h4>
и так далее.
Нужно использовать теги в соответствии с их семантическим значением, чтобы улучшить доступность и SEO-оптимизацию страницы.
Актуальность
Тег <h1>
является актуальным и широко используется в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023