Задать вопрос
@NordNerd
html

Как правильно сочетать теги article, section и заголовки h1-h6?

Добрый день! Помогите, пожалуйста, разобраться в семантической вёрстке html5, потому что возникает некая путаница :(

Согласно спецификации html, если я верно её понял, внутри тегов article и section нумерация заголовков h1-h6 начинается с начала, т.е. с h1. Однако при этом гугл рекомендует использование лишь одного h1 на странице. Как сочетать противоречивые рекомендации?

Вопрос возник в связи с тем, что нужно правильно разметить страницу с математическим контентом: сперва теория, потом задачи. Каждая задача представляет собой изолированный кусок контента, который гипотетически может быть использован и вне текста страницы, поэтому его логично обрамить тегами article. Т.е., по идее, непротиворечивая структура html-страницы должна выглядеть как-то так:

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


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

<h2>Экстремум функции n переменных (общий случай)</h2>
<p>Общая теория и формулы для функций, с числом переменных большим двух.</p>

<article>

   <header>
     <h1>Задача №1</h1>
   </header>
   
   <section>
     <h1>Условие</h1>
     <p>Тут условие задачи.</p>
   </section>

   <section>
     <h1>Решение</h1>
     <p>Тут решение задачи, а если в нём нужны заголовки - то они начнутся с h2.</p>
   </section>

   <section>
     <h1>Ответ</h1>
     <p>Тут ответ задачи.</p>
   </section>

</article>


Если я верно понимаю специфику html5, то такая структура страницы является корректной. Но будет ли она таковой на самом деле? И будут ли её нормально воспринимать поисковики?
  • Вопрос задан
  • 183 просмотра
4 комментария
Подписаться 2 Средний 4 комментария
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro Куратор тега HTML
frontend developer
У вас вся страница посвящена одной теме - экстремум функции. Семантически это одна статья. Значит должен быть один тег article (либо полное его отсутствие) соответственно один тег h1.
При этом если вы расположите h1 вне article и еще один внутри, это будет рассмотрено как нарушение семантики.

Использовать несколько заголовков первого уровня допустимо, например на страницах со списками статей (лента блога и т.п.)
<body>
<!-- никаких больше заголовков вне article! -->
<article>
  <h1>статья 1</h1>
</article>
<article>
  <h1>статья 2</h1>
</article>
<article>
  <h1>статья 3</h1>
</article>
</body>


Если хочется разбить статью на отдельные части, то в вашем случае, наверное, можно так

<article>
  <h1>Экстремум функции нескольких переменных</h1>
  <p>Вводные слова, общая постановка задачи и так далее.</p>
</article>

<article>
  <h1>Экстремум функции двух переменных</h1>
  <p>Теория, которая касается лишь функций двух переменных.</p>
</article>

<article>
  <h1>Экстремум функции n переменных (общий случай)</h1>
  <p>Общая теория и формулы для функций, с числом переменных большим двух.</p>
</article>

<article>
   <header>
     <h1>Задача №1</h1>
   </header>
   <section>
     <h2>Условие</h2>
     <p>Тут условие задачи.</p>
   </section>
   <section>
     <h2>Решение</h2>
     <p>Тут решение задачи, а если в нём нужны заголовки - то они начнутся с h2.</p>
   </section>
   <section>
     <h2>Ответ</h2>
     <p>Тут ответ задачи.</p>
   </section>
</article>
Ответ написан
2 комментария
2 комментария
@cssfish
Плохое знание основ - причина больших бед
Спецификации-то написали, но в целом данная идея провалилась и по-прежнему лучше иметь одну иерархию h1-h6 на странице
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
FullStack-разработчик
FunFlow • Москва
от 80 000 до 120 000 ₽
Frontend-разработчик React
ДАЛЕЕ • Москва
от 150 000 ₽
Fullstack-разработчик (Yii2, Vue.js, PostgreSQL)
OneLink
от 150 000 до 190 000 ₽
Ещё вакансии