All examples I found on Internet refers to using <h1>
inside <section>
, but nothing related to the use of <header>
element.
It's valid HTML5, but what about semantics?
Maybe I'm misusing the <section>
element, for the completeness here is my use case:
<main role="main">
<header>page header</header>
<section id="cookiesPolicy">
<header>
<h1>Cookies Policiy</h1>
</header>
<div>Bla bla bla bla bla bla bla</div>
</section>
<footer>page footer</footer>
</main>
Yes it is semantically correct to use header
inside section
header – There is a crucial difference between the
header
element and the general accepted usage ofheader
(or masthead). There’s usually only oneheader
or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use aheader
in anysection
on your site. In fact, you probably should use aheader
within most of your sections. The spec describes thesection
element as “a thematic grouping of content, typically with a heading.”
You can also check header
W3 specs here