Семантика заголовков: как правильно структурировать информацию на веб-страницах

При разметке макета страницы разработчики используют теги заголовков для выделения участка макета. Чаще всего тип заголовка выбирается исходя из размеров шрифта, что приводит к неправильной семантической разметке. Для примера возьмём типичную структуру разметки лендинга.

<header>
  <div class="logo"><!-- Логотип лендинга --></div>
  <nav class="menu"><!-- Меню лендинга --></nav>
</header>

<main>
  <section class="offer">
    <h1>Лучшие булочки в России</h1>
    <h2>Преимущества булочек</h2>
    <ol>
      <li>Аппетитные</li>
      <li>Сочные</li>
      <li>Горячие</li>
    </ol>
  </section>

  <section>
    <h2>Почему мы</h2>
    <!-- Описание секции -->
  </section>

  <section>
    <h3>Наши цены</h3>
    <div class="price">
      <h6>Свежие булочки</h6>
      <!-- Описание -->
    </div>
    <div class="price">
      <h6>Почти свежие булочки</h6>
      <!-- Описание -->
    </div>
    <div class="price">
      <h6>Булочки с прошлой недели</h6>
      <!-- Описание -->
    </div>
  </section>
</main>

<footer>
  <div class="menu">
    <h3>Контакты</h3>
    <!-- Меню -->
  </div>
</footer>

Такой тип разметок встречается часто. Вместо указания дополнительных классов разработчики подставляют заголовки, которые лучше подходят под дизайн макета. Но в чём же тут проблема?

Заголовки и их уровень можно представить в виде оглавления книги. Есть название книги, его можно описать как заголовок первого уровня. Есть глава, которая описывается заголовком второго уровня. Есть части главы, которые описываются заголовком третьего уровня. И этот список можно продолжать. Суть: текст делится на последовательные заголовки, внутри которых находится информация.

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

Теперь в таком виде «компьютер» видит структуру лендинга. Человеческий глаз, в отличие от компьютера, способен понять разницу в заголовках и выстроить правильную схему того, где начинается секция, а где заканчивается. Это происходит благодаря анализу информации на странице. Компьютер, в частности, поисковые роботы, ориентируются по структуре заголовков.

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

Исправим вёрстку лендинга, чтобы добиться правильной структуры информации.

<header>
  <div class="logo"><!-- Логотип лендинга --></div>
  <nav class="menu"><!-- Меню лендинга --></nav>
</header>

<main>
  <section class="offer">
    <h1>Лучшие булочки в России</h1>
    <h2>Преимущества булочек</h2>
    <ol>
      <li>Аппетитные</li>
      <li>Сочные</li>
      <li>Горячие</li>
    </ol>
  </section>

  <section>
    <h2>Почему мы</h2>
    <!-- Описание секции -->
  </section>

  <section>
    <h2>Наши цены</h2>
    <div class="price">
      <h3>Свежие булочки</h3>
      <!-- Описание -->
    </div>
    <div class="price">
      <h3>Почти свежие булочки</h3>
      <!-- Описание -->
    </div>
    <div class="price">
      <h3>Булочки с прошлой недели</h3>
      <!-- Описание -->
    </div>
  </section>
</main>

<footer>
  <div class="menu">
    <h2>Контакты</h2>
    <!-- Меню -->
  </div>
</footer>

При такой вёрстке получится следующая структура заголовков:

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

Все заголовки внутри одной страницы могут повторяться. Как в примерах выше, заголовки второго, третьего уровня могут повторяться много раз в рамках одной страницы. Исключение — заголовок первого уровня. Это самый приоритетный заголовок, он может встречаться только один раз в рамках одной страницы. В настоящее время ведутся дискуссии о снятии этого ограничения. В будущем возможно использование заголовка первого уровня внутри любого тега <section>, <article>. Сейчас такого стандарта нет, поэтому используйте заголовок первого уровня один раз для страницы.

Изучайте вёрстку на Хекслете

В профессии «Верстальщик» вы найдёте фундаментальные курсы и информацию о современных технологиях вёрстки. Во время обучения сверстаете полноценные лендинги и добавите их в портфолио.

Содержание

• Выводы
• Полезные ссылки

Выводы

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

Полезные ссылки

• Визуальное представление вложенности заголовков: headingsMap для Chrome и для Firefox