Семантическая вёрстка HTML5: как правильно использовать h1 в article и section

При создании страниц с математическим контентом, где каждая задача представляет собой независимый блок, разработчики часто сталкиваются с противоречием между спецификацией HTML5 и рекомендациями поисковиков. Согласно стандарту, внутри тегов article и section нумерация заголовков h1-h6 начинается заново, то есть можно использовать несколько h1. Однако Google рекомендует только один h1 на страницу. Как же правильно разметить такой контент?

Что говорит спецификация HTML5?

В HTML5 каждый элемент section и article создаёт собственный контур (outline). Это означает, что внутри них заголовки h1 не конфликтуют с заголовками внешнего документа. Технически структура с несколькими h1 внутри разных article является валидной. Однако на практике браузеры и поисковые системы не всегда корректно обрабатывают такие контуры, что может привести к путанице при индексации.

Рекомендации Google по использованию h1

Google официально рекомендует использовать один h1 на страницу. Это связано с тем, что заголовок h1 считается основным тематическим маркером содержимого. Если на странице несколько h1, поисковый робот может неверно определить главную тему. Для SEO-оптимизации лучше придерживаться этого правила, даже если спецификация HTML5 допускает иное.

Практическое решение: как разметить страницу с задачами

Чтобы соблюсти обе рекомендации, используйте вложенные заголовки h2 и h3 внутри article. Один h1 остаётся для всей страницы, а внутри каждой задачи заголовки понижаются на уровень. Пример правильной разметки:

<h1>Экстремум функции нескольких переменных</h1>
<p>Общая теория...</p>

<h2>Экстремум функции двух переменных</h2>
<p>Теория...</p>

<article>
  <header>
    <h2>Задача №1</h2>
  </header>
  <section>
    <h3>Условие</h3>
    <p>Текст условия...</p>
  </section>
  <section>
    <h3>Решение</h3>
    <p>Текст решения...</p>
  </section>
  <section>
    <h3>Ответ</h3>
    <p>Текст ответа...</p>
  </section>
</article>

Такая структура является и валидной, и SEO-дружественной. Поисковые системы легко определяют главную тему страницы по h1, а вложенные заголовки h2 и h3 чётко структурируют контент каждой задачи.

Как поисковики воспринимают такую разметку?

Современные поисковые системы, включая Google и Яндекс, хорошо понимают семантику HTML5. Они обрабатывают заголовки внутри article и section как подчинённые, если используется правильная иерархия. Главное - не нарушать логическую структуру: h1 на всю страницу, h2 для крупных разделов, h3 для подразделов внутри них. Это повышает шансы на попадание в сниппеты и улучшает ранжирование.

Дополнительные советы по семантической вёрстке

• Используйте тег header для группировки вводной информации внутри article или section.
• Избегайте пустых заголовков - каждый заголовок должен нести смысловую нагрузку.
• Проверяйте outline страницы с помощью валидаторов HTML5 или расширений браузера.
• Не злоупотребляйте вложенностью - более 3 уровней заголовков усложняют восприятие.

Следуя этим правилам, вы создадите страницу, которая будет одинаково хорошо понята и браузерами, и поисковыми системами.