HTML5 + 部分或 div

Question

我有一个非常具体的问题，希望在这里提问时没问题。

下列哪项是正确的用法：

1)

<div id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</div><!-- #more END -->

2)

<section id="more">
    <div class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
    <div class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </div>
</section><!-- #more END -->

3)

<section id="more">
    <section class="box">
        <h4>Links</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box">
        <h4>Partner</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
    <section class="box last">
        <h4>More</h4>
        <ul>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
            <li><a href="#" title="title">List 2</a></li>
        </ul>
    </section>
</section><!-- #more END -->

注意：代码 sn-p 位于网站底部，包含指向合作伙伴网站的链接、指向其他页面的链接以及指向其他类别/页面的站内链接。

如果您认为上述示例都不正确，您可以在这里发布您认为最好的解决方案吗？

如果情况 3) 最好：比我还应该将 h4 更改为 h1 并将它们放入 header ？

Answer 1

以上都不是。

Section 定义为：“用于文档中的一个部分。例如章节、页眉、页脚或文档的任何其他部分”。许多 HTML5 元素，例如 section，不提供新功能，而是提供文档语义（如您所标记的：）。 Section 和 div 看起来很像； section实际上是一个div，它本身包含元信息。

部分有 3 条一般经验法则：

-不要将它用作样式或脚本的钩子；这是一个div

-如果 article、aside 或 nav 更合适，请不要使用它

-除非部分开头自然有标题，否则不要使用它

所以这实际上取决于您的文档结构。在 HTML 中，“更多”包含一段超链接。您应该选择 2) 并将 section-element 更改为 nav-element。

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element

Answer 2

我认为 3 可能是你列出的最好的版本，尽管你可能想给 the specification 一次，看看描述的用法与你正在做的事情是如何匹配的。我要补充的一件事是，除非它是更大的内容分组的一部分，否则您可能需要考虑使用<aside> 标记来包装链接，因为它是页面其余部分之外的内容。但是，如果它是侧边栏或页脚的一部分，我认为<section> 标签可以正常工作。

至于<h4> 与<h1> 的问题，我不是100% 确定，但它可能不会受到伤害。 The W3C 建议分层使用标签，所以我想说的是，除非您将链接部分放在另一个使用 <h1> 的部分中，否则它应该是正确的做法。