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
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.”
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