Header inside a header? (HTML5)

Tags:
ajax android angularjs arrays asp.net bash c# css database date dictionary eclipse eloquent function gcc git hibernate html java javascript jquery laravel laravel-4 laravel-5 linux linux-kernel mysql nginx php python r reactjs regex ruby-on-rails select shell sql sql-server sql-server-2008 string tsql twitter-bootstrap ubuntu version-control xml

Header inside a header? (HTML5)

This seems strange to me but oddly there is a reason to use a <header> inside a <header>.

With the <hgroup> remove from the spec I’m seem to be at a weird state with what I should/could be doing with a following bit of code.

<header>
    <header>
        <h1>Maecenas faucibus</h1>
        <p class="h1-sub">Donec sed odio dui.</p>
    </header>
    <section>
        <img src="..." alt="faucibus">
        <img src="..." alt="faucibus">
        <img src="..." alt="faucibus">
    </section>
</header>

This does all appear in the header portion of an <article> so I wonder if it does visually appear there then should I still define it as a <header> or should I wrap it all in something like:

<section class="article-header">
    <header><h1>...</h1><p>...</p></header>
    <section>...</section>
</section>

I’ve not come across anything that said <header> couldn’t be nesting inside itself and wondered if this was the same call where you can have <article> nested in itself if it made logical sense (so if something is grouped together makes sense but also still does by itself).

According to the HTML5 specification, it is invalid to have a <header> element inside another <header> element.

It’s interesting, because the <header> permitted contents technically do allow for it:

Permitted contents -> Flow content -> Flow elements -> Header

However, there are constraints which are specific to the <header> element – they include:

  • The header element must not appear as a descendant of the footer
    element.

  • The header element must not appear as a descendant of the address
    element.

  • The header element must not appear as a descendant of the header element.

Therefore it is not valid mark-up – either as a direct child element or as a descendant element at all.

Looking at the link to the HTML5 specification you just posted (http://www.w3.org/TR/html-markup/header.html) it says..

“The header element must not appear as a descendant of the header element.”

Therefore according to the specification it contains flow content but excluding header, footer or main elements.

Recent Activity

Related Posts

.
.
.
.