Defining Inner Section On HTML5 Markup

A question about HTML5 markup. Which is correct?

-OR-

Solution 1:

Leaving attributes (like lang) aside, you can ignore div and span elements, as they are meaningless. So (apart from the different classes) your examples are semantically equivalent.

Assuming that the .wrapper element won’t contain anything else than the .wrapper-inner element, it’s up to you which one to use for which.

A possible benefit of using <header><div></div></header> over <div><header></header></div> could be that it might be easier for markup authors to spot the header in the document, as authors wouldn’t have to "enter" the div element to check what it contains and what it’s used for.

Solution 2:

Either is correct.

If you want to use as a sectioning element for the page, then, you likely want:

<header class="page-header">
    <div class="page-header-subsection">
    </div>
</header>

If you want to use as a sectioning element for a sub-section of the page, then, you likely want:

<section class="author-biography">
    <header class="author-name-and-thumbnail">
    </header>
</section>

Share