HTML Academy · Урок

Заголовки h1–h6 и их иерархия

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

«Заголовки h1–h6 и их иерархия» — бесплатный урок HTML Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Шесть уровней заголовков

HTML предоставляет шесть элементов заголовков — от <h1> до <h6>:

h1 — основной заголовок страницы (самый важный)
h2 — основные разделы
h3 — подразделы
h4, h5, h6 — более глубокие подразделы (нужны редко)

Визуально они уменьшаются в размере, но размер задаётся с помощью CSS, а не номером.

Семантическая иерархия

Заголовки создают структуру документа — оглавление вашей страницы:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

Правило h1

Рекомендуемый подход к использованию <h1>:

Используйте ровно один <h1> на странице
Он должен совпадать с элементом <title> или быть тесно с ним связан
Он обозначает основную тему страницы
Поисковые системы придают ему большой вес при SEO-оценке

Не пропускайте уровни

Уровни заголовков необходимо использовать по порядку — не переходите от h2 сразу к h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Заголовки для навигации

Пользователи программ чтения с экрана полагаются на заголовки при навигации по длинным страницам:

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

Оформление и семантика

Не выбирайте уровень заголовка из-за его визуального размера — для этого используйте CSS:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Заголовки в разделах

При использовании элементов секционирования HTML5 иерархия заголовков начинается заново в каждом разделе:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Советы по доступности заголовков

Соблюдайте следующие правила работы с заголовками для обеспечения доступности:

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

SEO и заголовки

Поисковые системы используют заголовки, чтобы понять содержимое страницы:

<h1> имеет наибольший вес с точки зрения SEO
Естественно включайте целевые ключевые слова в заголовки
Заголовки разделяют содержимое и улучшают показатели удобочитаемости
Поисковые системы показывают заголовки в результатах поиска (выделенные фрагменты)

Стили браузера по умолчанию

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

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Заголовки в навигации

Заголовки также можно использовать в навигационных областях:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Быстрая проверка

Сколько элементов h1 обычно должна содержать хорошо структурированная страница?

Итоги: заголовки

Основы иерархии заголовков:

Шесть уровней: от h1 до h6
Один h1 на страницу — основной заголовок
Используйте уровни по порядку — никогда не пропускайте уровень
Заголовки создают доступную структуру документа
Используйте CSS для визуального размера, а не номера заголовка

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

Урок «Заголовки h1–h6 и их иерархия» бесплатный?

Да — полный текст урока «Заголовки h1–h6 и их иерархия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Заголовки h1–h6 и их иерархия»?

Используйте уровни заголовков для создания осмысленной структуры документа Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

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

Сколько времени занимает урок «Заголовки h1–h6 и их иерархия»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к HTML Academy