Answer the question
In order to leave comments, you need to log in
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 header
is 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>
header
contain section
?
Answer the question
In order to leave comments, you need to log in
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>footer
header
um, what if we run this code through a validator? If he swears at this section, then he can't :)
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.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question