其中哪一个在语义上更好？

Question

为了使网站更易于访问，我被鼓励使用 HTML5 标签

、

等......仅围绕实际内容，但我有一种感觉，我可能做错了什么。

一个例子：

<header>
    <div class="center">
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </div>
</header>
<div>
    <section>
        ...
    </section>
</div>
<footer>
    <div class="center">
        ...
    </div>
</footer>

.center {
   max-width: 70em;
   margin: 0 auto;
}

header {
   width: 100%
   background-color: red;
}

footer {
   width: 100%
   background-color: green;
}

body > div {
   width: 100%
   background-color: blue;
}

这样真的更好吗？

<div id="head">
    <header>
        <h1>Title</h1>
        <nav>
            ...
        </nav>
    </header>
</div>
<div>
    <section>
        ...
    </section>
</div>
<div id="foot">
    <footer>
        ...
    </footer>
</div>

Answer 1

至于哪个更好 - DIV 位于 HEADER/FOOTER 之类的结构元素内或 DIV 内的结构元素，它确实没关系，因为 DIV 是通用容器，根本没有任何语义意义。

在第一个示例中真正不语义/不好的做法是 center 类名。类名称应反映块的用途（内容、产品等），而不是其表示形式（中心、红色 > 等）。

Answer 2

基本上，从语义上讲， div 元素不是必需的（也许您需要它们来设置样式？）。

div 是一个没有语义的元素（作为内联元素 span 的对应元素），您必须在没有更好的地方使用它们。即使您通过其 id 属性给它们一些语义，该语义也只有您知道，而不是任何网络搜索引擎（谷歌）或任何屏幕阅读器（对于盲人，对于例如），因为对于 id 或 class 值没有任何明确的约定。

如果您使用 header、footer 等，那么您就为它们赋予了语义。也许您想使用 role 的某些值来增加它们的语义属性。

顺便说一下，这个部分肯定是不需要的。看看 HTML5 Doctor 的人们怎么说：

在 HTML 5 中，您可以专门标记所有“次要”内容
导航、品牌、版权声明等页面，所以感觉
奇怪的是你不能具体标记最重要的部分
您的页面——内容。

但无论如何，专门标记它的目的是什么？
如果需要设置样式，请使用 div。辅助技术，例如
屏幕阅读器可以找到主要内容，因为它是第一件事
在不是页眉、导航或页脚的页面内。

有了

，您就拥有了所需的一切。

Answer 3

最好是这样：

<header>
    <h1>Title</h1>
    <nav>
        ...
    </nav>
</header>
<section>
    ...
</section>
<footer>
    ...
</footer>

或者：

<div class="header">
    <h1>Title</h1>
    <div class="nav">
        ...
    </div>
</div>
<div class="section">
    ...
</div>
<div class="footer">
    ...
</div>

为什么你被告知要添加那些额外的包装 div 元素？

Answer 4

尝试

<section>
  <header> head content </header>
  main content
  <footer> footer content </footer>
</section>

一下，摆脱所有那些愚蠢的 div，现在您已经将页眉和页脚链接到您的部分，就像它们应该的那样。