Тег <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.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.