W3docs
ru
Войти

HTML теги <h1>-<h6>

Теги <h1>–<h6> задают заголовки HTML. <h1> — самый важный заголовок, <h6> — наименее важный. Примеры с пояснениями!

Элементы <h1> — <h6> задают шесть уровней HTML-заголовков, где <h1> — наивысший (наиболее важный) уровень, а <h6> — наименее важный.

Совет

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

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

Если нужно изменить размер текста, лучше не использовать теги заголовков. Вместо этого можно применить CSS-свойство font-size. Рекомендуется не пропускать уровни заголовков (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) и использовать <h1> на странице только один раз.

Теги заголовков также имеют значение для SEO. Поисковая система пытается определить о странице две вещи: её тематику и качество. Одним из главных факторов при определении тематики страницы являются слова внутри тегов заголовков.

Когда страница содержит единственный материал, его основное название должно быть в теге <h1> в верхней части страницы. Крупные разделы включаются в <h2> и т.д. Таким образом можно сделать содержимое более структурированным. Стоит помнить, что никто не читает каждое слово материала.

Существует два типа страниц с контентом: страницы с единственным материалом и страницы-индексы. На страницах с единственным материалом его заголовок должен быть в <h1> в верхней части <body>. На странице-индексе в <h1> обычно размещают название сайта или имя индекса. Заголовки всех перечисленных отдельных элементов должны использовать теги <h2>.

Поскольку теги <h1> — <h6> являются блочными элементами, они всегда начинаются с новой строки и занимают всю доступную ширину.

По умолчанию браузеры отображают теги <h1>-<h6> со следующим CSS, где font-size уменьшается на каждом уровне, а font-weight остаётся жирным:

margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;

Синтаксис

Теги <h1>-<h6> используются парами, поэтому закрывающий тег обязателен.

Пример HTML-тегов <h1>-<h6>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>First-level heading</h1>
    <h2>Second-level heading</h2>
    <h3>Third-level heading</h3>
    <h4>Fourth-level heading</h4>
    <h5>Fifth-level heading</h5>
    <h6>Sixth-level heading</h6>
  </body>
</html>
Попробуйте сами »
Опасно

Элементы <h1>-<h6> не должны использоваться для разметки подзаголовков, подписей, альтернативных названий и слоганов, если только они не предназначены для обозначения нового раздела или подраздела.

Совет

Поскольку атрибут align не поддерживается в HTML5, используйте вместо него CSS-свойство text-align.

Построение структуры документа

Заголовки — это не размер, а структура. Представляйте <h1>-<h6> как оглавление страницы. <h1> называет всю страницу, каждый <h2> открывает крупный раздел, а <h3> (и глубже) вкладывает подразделы внутрь него — как 1 → 1.1 → 1.1.1 в печатном плане.

В приведённом ниже примере статья имеет один заголовок <h1>, два раздела <h2> и подраздел <h3>, вложенный в один из них. Прочитайте только заголовки — и вы уже понимаете, о чём страница:

<!DOCTYPE html>
<html>
  <head>
    <title>Growing Tomatoes at Home</title>
  </head>
  <body>
    <article>
      <h1>Growing Tomatoes at Home</h1>
      <p>A beginner's guide to a healthy tomato harvest.</p>

      <h2>Choosing a Variety</h2>
      <p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>

      <h2>Planting and Care</h2>
      <p>Tomatoes need full sun and consistent watering.</p>

      <h3>Watering Schedule</h3>
      <p>Water deeply two to three times a week, more often in heat.</p>

      <h3>Common Pests</h3>
      <p>Watch for aphids and hornworms on the underside of leaves.</p>
    </article>
  </body>
</html>
Result

Заголовки <h3> относятся к разделу «Planting and Care» <h2>, поскольку они следуют после него и описывают его части. Обратите внимание, что в примере никогда не происходит перехода сразу от <h1> к <h3> — каждый уровень следует за предыдущим.

Стилизация заголовков с помощью CSS

Чтобы изменить внешний вид заголовка — его цвет, размер, выравнивание или отступы — используйте CSS, а не другой уровень заголовка. Выбирайте тег заголовка по его месту в структуре, а затем оформляйте его свободно:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled headings</title>
    <style>
      h1 {
        color: #224cc5;
        text-align: center;
      }
      h2 {
        color: #22c599;
        font-size: 22px;
      }
      h3 {
        color: #bc22c5;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
    </style>
  </head>
  <body>
    <h1>Growing Tomatoes at Home</h1>
    <h2>Choosing a Variety</h2>
    <h3>Watering Schedule</h3>
  </body>
</html>
Result

Доступность и порядок заголовков

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

Два правила делают заголовки доступными:

  • Не пропускайте уровни. Идите <h1> → <h2> → <h3>, а не <h1> → <h3>. Пропущенный уровень заставляет вспомогательные технологии сообщать о разделе без родительского элемента.
  • Не выбирайте заголовок по визуальному размеру. Если нужен небольшой заголовок раздела, используйте правильный уровень (например <h3>) и уменьшите его с помощью CSS font-size. Никогда не используйте <h4> только потому, что он выглядит меньше.

Два фрагмента ниже размечают одно и то же содержимое. Первый нарушает структуру, второй сохраняет её:

<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>

<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>
Информация

Используйте только один <h1> на страницу. <h1> отвечает на вопрос «о чём эта страница?» — несколько таких заголовков запутывают этот ответ как для поисковых систем, так и для программ чтения с экрана. (Вы можете встретить устаревшие рекомендации, допускавшие один <h1> на каждый <article> или <section>; они опирались на алгоритм построения структуры документа, который ни один браузер так и не реализовал, поэтому придерживайтесь одного <h1> на страницу.) Заголовок страницы, отображаемый во вкладке браузера, задаётся отдельно с помощью тега <title> внутри <head>.

Для более полного понимания того, как шесть уровней работают вместе, смотрите раздел HTML-заголовки.

Атрибуты

Теги <h1> — <h6> не имеют собственных специфических атрибутов. Из набора глобальных атрибутов в заголовках особенно часто используются два:

АтрибутЗначениеОписание
idtextПрисваивает заголовку уникальный идентификатор, чтобы на него можно было ссылаться через якорную ссылку (#section-name) или использовать в CSS и JavaScript.
alignleft, right, center, justifyЗадаёт горизонтальное выравнивание заголовка. Устарел — не поддерживается в HTML5; используйте вместо него CSS-свойство text-align.

Распространённый способ применения id — возможность перейти прямо к нужному разделу:

<h2 id="planting">Planting and Care</h2>

<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>

Теги <h1> — <h6> также поддерживают глобальные атрибуты и атрибуты событий.

Практика

Практика
Выберите все верные утверждения о тегах HTML-заголовков:
Выберите все верные утверждения о тегах HTML-заголовков:
Практика
На странице нужен небольшой заголовок подраздела, который следует после раздела h2. Как правильно его разметить?
На странице нужен небольшой заголовок подраздела, который следует после раздела h2. Как правильно его разметить?
Was this page helpful?