在HTML5标记上定义内部部分

Question

关于HTML5标记的问题。哪个是对的？

<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; }

Answer 1

要么是正确的。

如果您想用作页面的分区元素，那么您可能需要：

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

如果您想用作页面子部分的分区元素，那么您可能需要：

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

Answer 2

将属性（如lang）放在一边，您可以忽略div和span元素，因为它们毫无意义。所以（除了不同的类）你的例子在语义上是等价的。

假设.wrapper元素不包含除.wrapper-inner元素以外的任何内容，则由您决定使用哪一个元素。

使用<header><div></div></header>优于<div><header></header></div>的一个可能好处是，标记作者可能更容易发现文档中的header，因为作者不必＆＃ 34;输入＆＃34; div元素用于检查它包含的内容及其用途。