Заголовки HTML: правильная иерархия и примеры

Раздел: Веб-разработка -> Структура HTML/файлы

Основные принципы использования заголовков

Заголовки (теги h1 - h6) задают иерархию содержимого. Правильная структура улучшает доступность и SEO.

Эффективное решение: соблюдение семантической иерархии

На странице должен быть один h1, далее h2, h3 и т.д. без пропусков уровней.

<h1>Название сайта</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h2>Раздел 2</h2>

Heading js (заголовок (heading) в html)

Пример показывает корректную вложенность. При нарушении (например, после h1 сразу h3) скринридеры могут неправильно интерпретировать структуру.

Ошибка: пропуск уровня (h1 затем h3). Решение: всегда использовать последовательные уровни.

Как задать уровень заголовка?

Выбор уровня зависит от важности: h1 - самый важный (обычно название страницы), h2 - основные разделы, и так далее.

<h2>История</h2>
<h3>Древний мир</h3>
<h3>Средневековье</h3>

Head js (элемент head в html)

Частая ошибка: использование h1 для логотипа, если на странице уже есть h1 в заголовке. Лучше использовать div или span.

Как стилизовать заголовки с помощью CSS?

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

h2 {
  font-size: 2rem;
  color: #333;
  border-bottom: 2px solid #ccc;
}

Title js (элемент title в html)

Проблема: уменьшение размера h1 до размера h3 для визуального эффекта может запутать пользователей. Рекомендуется сохранять визуальную иерархию.

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

Можно изменять текст, уровень или стили заголовков. Например, обновить заголовок при загрузке данных.

const heading = document.querySelector('h2');
heading.textContent = 'Новый заголовок';
heading.style.color = 'red';

Ошибка: изменение уровня заголовка (замена тега) требует создания нового элемента, иначе семантика не обновится для скринридеров.

Как сделать заголовки доступными для скринридеров?

Используйте правильную иерархию. Для нестандартных случаев применяйте ARIA-атрибуты role="heading" и aria-level.

<div role="heading" aria-level="2">Пользовательский заголовок</div>

Проблема: злоупотребление ARIA вместо нативных тегов. Лучше использовать h1-h6.

Как избежать дублирования h1 на странице?

Один h1 на странице - стандарт. Если нужно несколько заголовков высшего уровня, используйте h2 с соответствующим стилем.

<h1>Главный заголовок</h1>
<h2>Второй по значимости раздел</h2>

Ошибка: два h1 в разных секциях (например, в шапке и в статье). Скринридеры могут объявить оба как первый уровень, нарушая структуру.

Пример 1: Вложенные секции с заголовками

Пример

<section>
  <h2>Глава 1</h2>
  <article>
    <h3>Раздел 1.1</h3>
    <p>Текст...</p>
    <h4>Подраздел 1.1.1</h4>
  </article>
</section>

Результат: отобразится структура с разными уровнями заголовков.

Пример 2: Динамическое создание заголовков через JavaScript

Пример

const container = document.getElementById('content');
const levels = [1,2,3];
levels.forEach(level => {
  const heading = document.createElement(`h${level}`);
  heading.textContent = `Заголовок уровня ${level}`;
  container.appendChild(heading);
});

В контейнере появятся h1, h2, h3.

Пример 3: Доступный заголовок с помощью ARIA

Пример

<div role="heading" aria-level="3" aria-label="Третий уровень">Заголовок</div>

Скринридер объявит как заголовок уровня 3.

Пример 4: Стилизация с использованием CSS переменных

Пример

:root {
  --h1-size: 3rem;
  --h2-size: 2.5rem;
}
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }

Заголовки используют кастомные размеры.

Пример 5: Нумерация заголовков через CSS counter

Пример

body { counter-reset: h2counter; }
h2 { counter-increment: h2counter; }
h2::before { content: counter(h2counter) ". "; }

Перед каждым h2 появится номер.

Пример 6: Заголовок в шапке с логотипом

Пример

<header>
  <h1>Мой сайт</h1>
  <nav>...</nav>
</header>

Один h1 для всего сайта, обычно содержит название.

Пример 7: Изменение уровня заголовка при медиа-запросах (только визуально)

Пример

h2 {
  font-size: 1.5rem;
}
@media (max-width: 600px) {
  h2 {
    font-size: 1.2rem;
  }
}

На мобильных устройствах заголовок визуально меньше, но семантика не меняется.

Заголовок (heading) в HTML - comments

Heading js (javascript)