Семантика элемента header?

Question

[Borodean]

В спрашиваю раз говорю о «метафизике» — семантике HTML-верстки. Соответственно, все ответные вопросы «а зачем это нужно» имеют один ответ — just for fun.


Согласно текущей спецификации HTML5, элемент header представляет собой группу элементов вводного или навигационного значения. Как правило, он содержит заголовок раздела (section), но также может содержать другие элементы, такие как содержание, форму поиска или относящиеся к содержимому логотипы.


На практике элемент используется как для озаглавливания какого-либо раздела страницы, так и для всей страницы сразу. Иными словами, шапку сайта часто выностян в независимый header. Также, в него часто помещают навигационный кусок сайта, обернутый в элемент nav. Это всё не является ошибками с точки зрения семантики.


Однако, если в шапке сайта требуется разместить еще какую-либо информацию, кроме заголовка страницы и навигации, то можем ли мы для неё использовать элемент section? Например:

<header>
  <h1>Название сайта</h1>
  <nav>
    <h1>Навигация</h1>
    ...
  </nav>
  <section>
    <h1>Контактная информация</h1>
    ...
  </section>
</header>

Иными словами, вопрос заключается в следующем — может ли header содержать в себе section?

Answer 1

[Borodean]

Найден пример в текущей спецификации HTML5, который косвенно указывает на возможность такой верстки:

<footer>
  <nav>
    <section>
    <h1>Articles</h1>
      <p><img src="somersaults.jpeg" alt=""> Go to the gym with
      our somersaults class! Our teacher Jim takes you through the paces
      in this two-part article. <a href="articles/somersaults/1">Part
      1</a> · <a href="articles/somersaults/1">Part 2</a></p>
      <p><img src="kindplus.jpeg"> Tired of walking on the edge of
      a clif<!-- sic -->? Our guest writer Lara shows you how to bumble
      your way through the bars. <a href="articles/kindplus/1">Read
      more...</a></p>
      <p><img src="crisps.jpeg"> The chips are down, now all
      that's left is a potato. What can you do with it? <a
      href="articles/crisps/1">Read more...</a></p>
    </section>
    <ul>
      <li> <a href="/about">About us...</a>
      <li> <a href="/feedback">Send feedback!</a>
      <li> <a href="/sitemap">Sitemap</a>
    </ul>
  </nav>
  <p><small>Copyright © 2015 The Snacker —
  <a href="/tos">Terms of Service</a></small></p>
</footer>

Тут речь идет об элементе footer; семантически, он имеет смысл, практически аналогичный элементу header.

Answer 2

[mdss]

web-standards.ru/articles/avoiding-html5-mistakes/

Comments

[Borodean]

Читал эту статью, но какое она разве она имеет отношение к данному вопросу?

[Borodean]

* какое она

Answer 3

[Константин Китманов]

гм, а если прогнать этот код через валидатор? Если он ругнется на этот section, значит, не может:)

Comments

[Borodean]

Насколько я знаю, валидатор довольно попустительно относится к семантическим ошибкам.

[Gosha Arinich]

Хмм… у меня ругался на figure в header, так что нормально валидирует семантические ошибки.

Answer 4

[Kane]

Я думаю что так делать не стоит. «A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.», — developers.whatwg.org/sections.html#the-section-element

Comments

[Borodean]

Позволю себе не согласится. Блок контактной информации, например, вполне пригоден для аутлайна. Взгляните сами:

<section id='contacts'>
  <h1>Контактная информация</h1>
  <p class='phone'>[phone]</p>
  <p class='location'>Тарант, пр-т Веримиллион Роуд, Музей машин и двигателей им. Гильберта Бейтса</p>
</section>

Или же я неправильно понял ваше замечание?