Question

我很难理解推荐使用部分，导航，标题和浮动div容器的方法。

我有一个网络范围的导航，后跟一个站点范围的导航，就像这个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>

...我应该在一个标题中的两个导航中都有导航，还是应该有两个标题？
...我的div.float-left应该是一个部分中的一个部分吗？
......总的来说，有没有更好的方法来安排我的加价？

Answer 1

HTML5分区元素可能有点挑战，但我会尝试给你一个坚实的演练：

header元素 只要您感觉“介绍性”内容可以存在，就可以使用此元素。最合乎逻辑的示例是每个页面上显示的网站标题，但它也可以是文章中的标题。您对header的使用很好。

section元素 这个元素很棘手，应该只用于将内容组合在一起。一个很好的例子就是如果你的主页上有一个新闻栏目，其中包含一系列最新新闻文章。请大声读出前一句话，你会发现有{_ 1}}和section的关系;-) 您对article元素的使用不正确。 注意：部分必须包含标题！

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

网站范围内的导航（例如全局标题中的导航）
文章导航（例如，在文章的章节之间导航）

不要将nav元素用于其他任何内容，它实际上仅对“主”导航有用。在你的情况下，它很好，因为两个导航都非常“全球化”。 注意：所有nav元素都应有标题！

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

nav

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

正确的HTML5标记，用于浮动徽标，标语和2个导航

1 个答案: