Question

为了让网站更易于访问，我们鼓励我使用HTML5代码<header>，<footer>等...仅包围实际内容，但我有一种感觉，我可能会做错了。

示例正文：

<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类名。类名应反映阻止（content，products等）的目的，而不是其表示（center，red等）。

Answer 2

基本上，语义上不需要div个元素（也许你需要它们来造型？）。

div是一个没有语义的元素（作为内联元素span的对应元素），你必须在没有更好的地方使用它们。即使你用id属性赋予它们一些语义，该语义只能由你知道，而不是用于任何网络搜索电机（google）或任何屏幕阅读器（例如盲人），因为没有关于id或class值的明确约定。

如果您使用header，footer等，则表示您正在使用语义。也许您想使用role attribute的某些值来增加语义。

顺便说一下，section肯定不需要它。看看来自HTML5 Doctor say的人：

在HTML 5中，您可以专门标记所有“辅助”内容   一个页面，如导航，品牌，版权声明，所以感觉   奇怪的是，你无法专门标记最重要的部分   你的页面 - 内容。

但是，无论如何，具体标记它的目的是什么？   如果你需要设置样式，请使用div。像一个辅助技术   screenreader可以找到主要内容，因为它是第一件事   在不是标题，导航或页脚的页面内。

使用<div role="main">，您可以获得所需的一切。

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，现在你的页眉和页脚就像你应该的那样链接到你的部分。

哪个在语义上更好？

4 个答案: