html5: using header or footer tag twice?

HtmlHeaderSemantics

Html Problem Overview


quick question: is it actually allowed to use the header tag twice? e.g. i have two important head-sections in my header.php where both could have header tag?

Html Solutions


Solution 1 - Html

Yes, but with a catch. The W3 documents state that the tags represent the header and footer areas of their nearest ancestor section. I would recommend having as many as your want, but only 1 of each for each "section" of your page, i.e. body, section etc.

From W3

> A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

=========================

> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Here are links to their respective standard documentation: header and footer

Solution 2 - Html

Yes you can use multiple header elements in your documents, by virtue of the w3c documentation:

> A header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.

However ensure that it is semantically correct.

Solution 3 - Html

There's no penalty for using two header tags, but make sure it makes sense.

Happy coding!

Solution 4 - Html

The <header> is used to mark the header of e.g. articles in newspaper, so if you have multiple articles you can use multiple <header>.

It's like using multiple <h1>. It does only make sense in some special case.

Solution 5 - Html

In some situation, it is posible put two <header> in single <article>/<section> like this, so why not.

 <article>
      
      <!-- Feature Image on the LEFT -->
      <div class="position-left">
         ...featrue image...
        <header>
        ...H1 title ...  
        </header>
      </div>
      
      <!-- Content on the RIGHT with subtitle, date, etc -->
      <div class="position-right">
        <header>
          ..date, sub-title, etc...
        </header>
        ...content...
        <footer>..</footer>
      </div>
        
    </article>

Solution 6 - Html

You can put two <header> tags in your document, sure. Semantically, however, it is incorrect. Why not use one <header> tag and use a different tag inside it?

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmattView Question on Stackoverflow
Solution 1 - Htmllinusthe3rdView Answer on Stackoverflow
Solution 2 - HtmlMarcus WhybrowView Answer on Stackoverflow
Solution 3 - HtmlHoria DragomirView Answer on Stackoverflow
Solution 4 - HtmlFloernView Answer on Stackoverflow
Solution 5 - HtmliMarshalView Answer on Stackoverflow
Solution 6 - HtmlScott M.View Answer on Stackoverflow