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

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

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

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

Answer 1

以上都不是。

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

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

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

- 如果文章，旁边或导航更合适，不要使用它

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

所以这真的取决于你的文档结构。在HTML中，“more”包含一段超链接。你应该选择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> vs <h1>的问题，我不是百分百肯定，但可能不会受到伤害。 The W3C建议按层次结构使用标记，所以我要说，除非你在另一个使用<h1>的部分中找到了链接部分，否则它应该是正确的。

HTML5 + Section或Div

2 个答案: