PrepBro
← Назад к вопросам

Как работают теги заголовков?

2.0 Middle🔥 181 комментариев
#Soft Skills и рабочие процессы

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как работают теги заголовков (H1-H6)

Основное назначение

Теги заголовков (heading tags) h1, h2, h3, h4, h5, h6 — это инструмент для структурирования контента на веб-странице. Они определяют иерархию информации и служат нескольким целям одновременно.

1. Структурирование контента

Теги заголовков создают логическую иерархию страницы:

<h1>Главное заголовок страницы (только один)</h1>

<h2>Раздел 1</h2>
<p>Содержимое раздела 1...</p>
<h3>Подраздел 1.1</h3>
<p>Содержимое подраздела...</p>

<h2>Раздел 2</h2>
<p>Содержимое раздела 2...</p>
<h3>Подраздел 2.1</h3>
<h4>Подподраздел 2.1.1</h4>
<p>Содержимое...</p>

Эта иерархия помогает:

  • Читателям понять структуру статьи
  • Программам (screen readers для слабовидящих)
  • Поисковикам (Google, Yandex) понять, о чём страница

2. H1 — главный заголовок

Каждая страница должна иметь ровно ОДИН h1:

<!-- Правильно -->
<h1>Как использовать Promise.all в JavaScript</h1>
<h2>Введение</h2>
<h2>Примеры использования</h2>

<!-- Неправильно — два h1 -->
<h1>Основной заголовок</h1>
...
<h1>Ещё один h1</h1> <!-- Ошибка! -->

<!-- Неправильно — нет h1 вообще -->
<h2>Раздел 1</h2> <!-- Нарушена иерархия -->

Почему один h1?

  • Google считает, что одна страница = одна тема
  • Multiple h1 запутывают поисковые алгоритмы
  • Доступность: скрин-ридеры предполагают одну главную тему

3. Иерархия заголовков

Правильный порядок — БЕЗ пропусков:

<!-- Правильно -->
<h1>Тема</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h4>Детали 1.1.1</h4>

<!-- Неправильно — пропущена h2 и h3 -->
<h1>Тема</h1>
<h4>Детали (где h2 и h3?)</h4> <!-- Ошибка! -->

<!-- Неправильно — прыгаем с h1 на h3 -->
<h1>Тема</h1>
<h3>Подраздел (потеряна h2)</h3> <!-- Ошибка! -->

4. SEO значение

Поисковики анализируют заголовки для понимания содержимого:

<!-- Хороший h1 для SEO -->
<h1>Купить ноутбуки Dell в Москве</h1>
<!-- Ключевые слова: ноутбуки, Dell, Москва -->

<!-- Плохой h1 для SEO -->
<h1>Добро пожаловать</h1> <!-- Не даёт информации -->
<h1>Товары</h1> <!-- Слишком общее -->

Рекомендации:

  • H1 должен содержать главное ключевое слово
  • H2 могут содержать вторичные ключевые слова
  • Не заполняй заголовки только для SEO (пользователи должны понимать текст)
  • Естественный язык > искусственное напихивание keywords

5. Доступность (Accessibility)

Теги заголовков критичны для людей с нарушениями зрения, которые используют скрин-ридеры:

<!-- Хорошо для доступности -->
<h1>Как готовить паста</h1>
<h2>Ингредиенты</h2>
<h3>Для классической паста болоньезе</h3>
<h2>Процесс приготовления</h2>

<!-- Плохо — нет заголовков, скрин-ридер не поймёт структуру -->
<div class="title">Как готовить паста</div>
<div class="subtitle">Ингредиенты</div>

Пользователи скрин-ридеров могут:

  • Навигировать по заголовкам ("Перейти к h2")
  • Увидеть оглавление страницы
  • Понять структуру контента

6. Размер шрифта — визуальное представление

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

h1 { font-size: 32px; font-weight: bold; }
h2 { font-size: 28px; font-weight: bold; }
h3 { font-size: 24px; font-weight: bold; }
h4 { font-size: 20px; font-weight: bold; }
h5 { font-size: 16px; font-weight: bold; }
h6 { font-size: 14px; font-weight: bold; }

Важно: НЕ выбирай тег заголовка на основе размера! Выбирай на основе СЕМАНТИЧЕСКОГО значения:

<!-- Неправильно -->
<h3>Важный текст, потому что хочу крупный шрифт</h3> <!-- Ошибка! -->

<!-- Правильно -->
<h2>Важный раздел</h2>
<p class="lead">Важный текст с большим шрифтом</p>

<!-- Если размер не подходит — используй CSS -->
<h2 class="custom-size">Раздел</h2>
<style>
  h2.custom-size { font-size: 14px; } /* Переопределяю размер -->
</style>

7. Практические примеры

Пример 1: Статья в блоге

<article>
  <h1>10 лучших практик CSS</h1>
  
  <h2>Введение</h2>
  <p>В этой статье я расскажу...</p>
  
  <h2>1. Используй CSS переменные</h2>
  <p>CSS переменные (custom properties)...</p>
  <h3>Пример использования</h3>
  <code>:root { --primary-color: #007bff; }</code>
  
  <h2>2. BEM методология</h2>
  <p>BEM расшифровывается...</p>
  
  <h2>Заключение</h2>
  <p>Спасибо за внимание!</p>
</article>

Пример 2: Лендинг

<header>
  <h1>PrepBro — платформа для подготовки к интервью</h1>
</header>

<section id="features">
  <h2>Основные возможности</h2>
  <div class="feature">
    <h3>Вопросы по всем направлениям</h3>
    <p>Более 1000 вопросов...</p>
  </div>
  <div class="feature">
    <h3>Персонализированная подготовка</h3>
    <p>ИИ подбирает вопросы...</p>
  </div>
</section>

<section id="pricing">
  <h2>Тарифы</h2>
  <h3>Базовый тариф</h3>
  <h3>Премиум тариф</h3>
</section>

Пример 3: E-commerce

<h1>Ноутбуки</h1>

<h2>Фильтры и сортировка</h2>
<p>Показаны товары...</p>

<div class="products">
  <div class="product">
    <h3>Dell XPS 13</h3> <!-- Не h2! Это не раздел, а название товара -->
    <p>Цена: 1500$</p>
  </div>
</div>

<h2>Отзывы</h2>
<h3>5 звёзд</h3>
<p>Отличный ноутбук...</p>

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

Ошибка 1: Множественные h1

<!-- Неправильно -->
<h1>Главный заголовок</h1>
...
<h1>Ещё один h1</h1> <!-- SEO штраф! -->

Ошибка 2: Пропуск иерархии

<!-- Неправильно -->
<h1>Раздел A</h1>
<h4>Подраздел (где h2 и h3?)</h4>

Ошибка 3: Выбор тега по размеру

<!-- Неправильно -->
<h5>Большой заголовок (выбрал h5 для маленького текста)</h5>

Ошибка 4: Использование div вместо заголовков

<!-- Неправильно -->
<div class="heading">Раздел</div> <!-- Невидимо для скрин-ридеров -->

<!-- Правильно -->
<h2>Раздел</h2>

9. Инструменты для проверки

  1. Wave (wave.webaim.org) — проверяет доступность заголовков
  2. Lighthouse (в Chrome DevTools) — SEO и доступность
  3. HTML Validator — проверяет правильность иерархии
  4. Headings Map (расширение Chrome) — визуализирует структуру заголовков

10. Best Practices

<!-- ✅ Правильно -->
<h1>Главная тема страницы (только один!)</h1>

<h2>Основной раздел 1</h2>
<p>Содержимое...</p>
<h3>Подраздел</h3>
<p>Содержимое...</p>

<h2>Основной раздел 2</h2>
<p>Содержимое...</p>

<!-- Рекомендации:
  1. H1 = тема страницы
  2. H2 = основные разделы
  3. H3-H6 = подробные разделы
  4. Иерархия без пропусков
  5. Не пропускай на основе размера
  6. SEO keywords в h1 и h2
  7. Проверяй с assistive technologies
-->

Выводы

  1. Один h1 на странице — это главное правило
  2. Иерархия важна — для людей, поисковиков и скрин-ридеров
  3. Семантика > визуальность — выбирай на основе значения, не размера
  4. SEO + доступность — заголовки помогают обоим
  5. Проверяй структуру — используй инструменты для валидации
  6. Пользователи благодарны — хорошая структура улучшает UX

Заголовки — это основа структурированного веба. Используй их правильно!