Логотип Хекслета
/
Блог Хекслета
/
Код
/

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

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

Веб-разработка
9 сентября 2020 г.
3 минуты
12
Семантика заголовков: как правильно структурировать информацию на веб-страницах
Присоединяйтесь к нашему Telegram-сообществу

Содержание

Пример

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

<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>

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

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

Книга о вкусной еде (h1)
├── Мясо (h2)
│   ├── Говядина (h3)
│   ├── Свинина (h3)
│   └── Баранина (h3)
├── Птица (h2)
│   ├── Курица (h3)
│   └── Индейка (h3)

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

Лучшие булочки в России (h1)
├── Преимущества булочек (h2)
├── Почему мы (h2)
│   ├── Наши цены (h3)
│   │   ├── ??? (h4)
│   │   │   ├── ??? (h5)
│   │   │   │   ├── Свежие булочки (h6)
│   │   │   │   ├── Почти свежие булочки (h6)
│   │   │   │   └── Булочки с прошлой недели (h6)
│   └── Контакты (h3)

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

Обратите внимание, что заголовков <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>

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

Лучшие булочки в России (h1)
├── Преимущества булочек (h2)
├── Почему мы (h2)
├── Наши цены (h2)
│   ├── Свежие булочки (h3)
│   ├── Почти свежие булочки (h3)
│   └── Булочки с прошлой недели (h3)
├── Контакты (h2)

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

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

Выводы

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

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

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

Nikita Mikhaylov

5 лет назад

12

Читайте также:

Категории