Исполняемые доки HTML: Заголовки HTML

Q: Сколько тегов заголовков в HTML?

Шесть: , , , , и . самый важный (заголовок страницы), наименее важный. Тега нет; такой тег считается неизвестным строчным элементом.

Q: Какие размеры у заголовков HTML по умолчанию?

При обычном тексте 16px браузеры показывают h1 размером 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) и h6 10.72px (0.67em), все жирным.

Q: Можно ли использовать несколько h1 на странице?

HTML это разрешает, но один с названием страницы дает самую понятную структуру для пользователей программ чтения с экрана и для поисковиков. Для основных разделов под ним используйте .

Q: Как изменить размер заголовка?

Задайте font-size в CSS, например h2 { font-size: 20px; } или класс для одного заголовка. Никогда не выбирайте уровень заголовка из-за его размера по умолчанию.

Заголовки в HTML: от h1 до h6, размеры, порядок и стили

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

На этой странице есть исполняемые редакторы: меняйте, запускайте и сразу видите результат.

Автор Kevin Spektor, Co-founder & CTO

Опубликовано Sep 24, 2026

Шесть тегов заголовков HTML

В HTML шесть уровней заголовков, от <h1> до <h6>. <h1> это верхний уровень (заголовок страницы), <h6> самый нижний. Браузер показывает каждый уровень меньше предыдущего, все жирным шрифтом, каждый на отдельной строке:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Тег	Размер по умолчанию	При тексте 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> и <h6> по умолчанию меньше обычного текста, и это многих удивляет. Размер это только значение по умолчанию, а в следующих разделах показано, почему уровень никогда не стоит выбирать по размеру.

Заголовки это структура страницы

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Замените второй <h3> на <h5>, и в структуре появится пробел: читатель, который пользуется заголовками, удивится, куда делся h4.

Как изменить размер заголовка

Выбирайте уровень по месту в структуре, а внешний вид задавайте через CSS. Заголовок боковой панели может быть <h2>, но выглядеть мелким; заголовок главного экрана может быть очень крупным <h1>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Верно и обратное: не используйте тег заголовка только ради крупного или жирного текста. Для жирных слов внутри предложения используйте <strong>, а для крупного текста, который не является заголовком, <p> с классом. Текстовые теги описаны на странице про жирный текст.

Подзаголовки и слоганы

Подзаголовок прямо под заголовком обычно сам заголовком не является: он не начинает новый раздел. Используйте абзац, а пару при желании объедините в <hgroup>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Структура остается чистой (один h1, затем разделы h2), а слоган визуально стоит рядом с заголовком.

Ссылка на заголовок

Дайте заголовку id, и любая ссылка с #id в href будет переходить прямо к нему. Так работают оглавления и кнопки «скопировать ссылку на раздел»:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Частые ошибки

Уровень выбран по размеру. Выбирайте по месту в структуре, затем задавайте стиль через CSS.
Пропуск уровней. Переход от <h2> сразу к <h4> ломает навигацию для пользователей программ чтения с экрана.
Заголовки для выделения. Жирная строка внутри абзаца это <strong>, а не <h4>.
Нет <h1> или единственный <h1> это логотип. <h1> должен называть содержимое страницы, например заголовок статьи или название товара.
Пустые заголовки. Заголовок только с иконкой или вообще без содержимого объявляется пустым. Пишите в нем настоящий текст.

Часто задаваемые вопросы

Сколько тегов заголовков в HTML?

Шесть: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. <h1> самый важный (заголовок страницы), <h6> наименее важный. Тега <h7> нет; такой тег считается неизвестным строчным элементом.

Какие размеры у заголовков HTML по умолчанию?

При обычном тексте 16px браузеры показывают h1 размером 32px (2em), h2 24px (1.5em), h3 18.72px (1.17em), h4 16px (1em), h5 13.28px (0.83em) и h6 10.72px (0.67em), все жирным.

Можно ли использовать несколько h1 на странице?

HTML это разрешает, но один <h1> с названием страницы дает самую понятную структуру для пользователей программ чтения с экрана и для поисковиков. Для основных разделов под ним используйте <h2>.

Можно ли пропускать уровни заголовков, например h2 и сразу h4?

Лучше не надо. Пользователи программ чтения с экрана перемещаются по уровням заголовков, и переход от h2 к h4 намекает на пропущенный раздел. Выбирайте уровень по месту в структуре, а размер меняйте через CSS.

Как изменить размер заголовка?

Задайте font-size в CSS, например h2 { font-size: 20px; } или класс для одного заголовка. Никогда не выбирайте уровень заголовка из-за его размера по умолчанию.

Связанные концепции