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