更正 HTML5 mark-up 浮动徽标、标语和 2 个导航

Question

我很难理解同时使用部分、导航、headers 和浮动 div 容器的推荐方法。

我有一个 network-wide 导航，后面跟着一个 site-wide 导航，就像这个 Stack Overflow 网站一样。

基于以下代码...

<header>

    <!--Navigation menu for network:-->
    <section>
        <nav>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </nav>
    </section>

    <!--Navigation menu for site:-->
    <section>
        <div class="float-left">
            <h1>Logo Text</h1>
            <h2>Slogan Text</h2>
        </div>
        <nav class="float-right">
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </nav>
    </section>

</header>

...我应该在一个 header 中将两个导航都放在各自的部分中，还是应该有两个 header？
...我的 div.float-left 应该是一个部分中的一个部分吗？
...总的来说，有没有更好的方法来安排我的mark-up？

Answer 1

HTML5 分段元素可能有点挑战，但我会尽量给你一个坚实的 walk-through:

header元素 这个元素可以用在任何你觉得 "introductory" 内容可以存在的地方。最合乎逻辑的例子是显示在每个页面上的网站的 header，但它也可以是文章中的 header。您使用 header 没问题。

section元素 这个元素很棘手，实际上应该只用于将内容分组在一起。一个很好的例子是，如果您的主页上有一个包含 collection 最新新闻文章的新闻版块。尝试大声朗读前面的句子，您会注意到 section 和 article 这两个词有关系 ;-) 您对 section 元素的使用不正确。 注意：部分必须包含标题！

nav元素 在两种情况下，此元素应专门用于导航项：

Website-wide 导航（就像全局 header 中的导航）
文章导航（例如在文章的章节之间导航）

不要将 nav 元素用于任何其他用途，它实际上仅对 "main" 导航有用。在你的情况下，这很好，因为两个导航都非常 "global"。 注意：所有 nav 元素都应该有一个标题！

回到您的示例，以下标记将更合适和有效：

<header>

    <!-- Navigation menu for network: -->
    <nav>
        <h2>Network navigation</h2>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>

    <!-- Logo, title and slogan -->
    <img src="some/path" alt="Logo Description" class="logo">
    <h1>Website name</h1>
    <p class="slogan">Slogan text</p>

    <!-- Navigation menu for network: -->
    <nav>
        <h2>Site navigation</h2>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </nav>

</header>

HTML5 Doctor 在这方面也有很多很好的资源！ http://html5doctor.com/

更正 HTML5 mark-up 浮动徽标、标语和 2 个导航

Correct HTML5 mark-up for floating logo, slogan and 2 navs

html

semantic-markup