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>
The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
The <header> tag in HTML is used to define the header for a document or a section as it contains the information related to the title and heading of the related content. The <header> element is intended to usually contain the section's heading (an h1-h6 element or an <hgroup> element), but this is not required.
Rule of thumb : only one <main> per page ; top-level element (in most cases) ; don't put your site's header/menu/footer (repeated content) in your <main> .
The <header> element represents a container for introductory content or a set of navigational links. A <header> element typically contains: one or more heading elements (<h1> - <h6>) logo or icon.
Yes it is semantically correct to use header inside section
header – There is a crucial difference between the
headerelement and the general accepted usage ofheader(or masthead). There’s usually only oneheaderor ‘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 aheaderin anysectionon your site. In fact, you probably should use aheaderwithin most of your sections. The spec describes thesectionelement as “a thematic grouping of content, typically with a heading.”
Source
You can also check header W3 specs here
header is:
introductory content for its nearest ancestor sectioning content or sectioning root element.
section is a valid sectioning content, so header is semantically correct - even encouraged - in this position.
Quote taken from this HTML5 Doctor page, which actually quotes the HTML5 spec directly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With