B
B
Borodean2011-09-26 14:58:55
HTML
Borodean, 2011-09-26 14:58:55

The semantics of the header element?

This time I ask, I'm talking about "metaphysics" - the semantics of HTML layout. Accordingly, all the response questions “why is this necessary” have one answer - just for fun.
According to the current HTML5 specification, an element headeris a group of introductory or navigational value elements. It typically contains a section title ( section), but can also contain other elements such as content, a search form, or content-related logos.
In practice, the element is used both for the heading of any section of the page, and for the entire page at once. In other words, the site header is often placed in an independent header. Also, it is often placed in a navigational piece of the site, wrapped in a nav. These are not errors in terms of semantics.
However, if we need to place some other information in the header of the site, besides the page title and navigation, can we use the element for it section? For example:

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

In other words, the question is: can it headercontain section?

Answer the question

In order to leave comments, you need to log in

5 answer(s)
B
Borodean, 2011-09-26
@Borodean

I found an example in the current HTML5 specification that indirectly indicates the possibility of such a layout: Here we are talking about the element ; semantically, it has a meaning almost identical to the .
<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>

footerheader

M
mdss, 2011-09-26
@mdss

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

K
Konstantin Kitmanov, 2011-09-26
@k12th

um, what if we run this code through a validator? If he swears at this section, then he can't :)

A
almazmusic, 2011-09-27
@almazmusic

Here you've stubbed out two first-level headings, one of which is in the navigation, and you should be familiar with the semantics of the section. The section, according to the recommendations, should contain a heading, as if denoting the essence of itself to search engines. Therefore, for the future, keep in mind that you need to give a real example, and not a non-semantic fish.

K
Kane, 2011-09-26
@Kane

I don't think it's worth doing that. "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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question