Defining inner section on HTML5 markup

问题

A question about HTML5 markup. Which is correct?

<header class="wrapper">
    <div class="wrapper-inner">
    </div>
</header>

-OR-

<div class="wrapper">
    <header class="wrapper-inner">
    </header>
</div>

.wrapper { width: 100%; }
.wrapper-inner { width: 980px; margin: 0 auto; }

回答1:

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>

回答2:

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.

来源：https://stackoverflow.com/questions/33788638/defining-inner-section-on-html5-markup

标签

html5

semantic-markup