Multiple
and
in a HTML5 document

Question

Is it fine to use multiple <header> and in HTML 5, if yes then isn't semantically incorrect and won't it confuse mobile readers?

I saw many site uses like

<body class="home">
    <header class="hd1">
        <hgroup>
        <h1>HTML5 Documnet</h1>
        <h2>tagline</h2>
        </hgroup>
    </header><!-- .hd1 -->
    <div class="main">
        <section class="hs1">
            <header>
            <h1>This is a Page Sub Title</h1>
            </header>
    
            <p>Some content...</p>
            <h2>Demonstrating EM and STRONG</h2>
            
            <p><strong>This text will have more importance (SEO-wise and contextually)</strong></p>         
            
            <footer>
            <p>Author: <cite>Louis Lazaris</cite></p>
            </footer>

        </section>
    </div><!-- .main -->
    <footer class="f1">
    <p>copyright &copy; year</p>
    </footer><!-- .f1 -->

</body>

Oscar Godson · Accepted Answer

Yes, multiple <header> and <footer> elements are fine. They aren't used the same as <div id="header"> as most people use them for. Technically speaking, header and footer represent a header and footer of a section. A section being a piece of the page such as an article that contains header tags like <h1> and then content, then footer stuff like copyrights, citations, references, etc.

From the horses mouth:

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.

And

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.

Directly from the spec at: http://dev.w3.org/html5/spec/Overview.html

Note that as I said these are not used to create sections like people did with <div id="header/footer"> it mentions this confusion in the spec:

The footer element is not sectioning content; it doesn't introduce a new section.

So, again, "technically" speaking, that last footer you have there introduces a new section and isn't semantic. From the spec's point of view anyways.

Multiple <header> and <footer> in a HTML5 document

Tags:

html

accessibility

semantic-markup

Jitendra Vyas

1 Answers

Oscar Godson

Recent Activity

Donate For Us