Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

It is semantically correct to use <header> inside <section>?

Tags:

html

semantics

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>
like image 423
Félix Sanz Avatar asked May 09 '16 17:05

Félix Sanz


People also ask

Should a section have a header?

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.

Can you have a header in a section HTML?

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.

Should header go inside main?

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

Where do we use header?

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.


2 Answers

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 of header (or masthead). There’s usually only one header 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 a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

Source

You can also check header W3 specs here

like image 137
dippas Avatar answered Sep 23 '22 08:09

dippas


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.

like image 27
rockerest Avatar answered Sep 23 '22 08:09

rockerest