Question

所以我一直在玩我正在重新设计的网站的HTML。感谢HTML5 shiv，我一直在使用闪亮的新HTML5标签。因此，我开始觉得我有很多标签杂乱。例如：

<header>
    <nav>
        <h1 id="logo"><a href="/">Logo Image CSS'd in here</a></h1>
        <ul>
            <li><a href="/page-1">Page 1</a></li>
            <li><a href="/page-1">Page 2</a></li>
            <li><a href="/page-1">Page 3</a></li>
            <!-- etc. -->
        </ul>
    </nav>
</header>

我在<nav>中添加了我的徽标，因为我有空间限制，我删除了显式的Home链接（我的主页只是子页面内容的摘要，内联链接到它们）。从语义上讲，我认为HTML5文档应该包含<header>和<nav>。毕竟，仅<nav>并不意味着它是主页面导航（我使用<nav>来包装我的面包屑和页脚链接）并且我觉得我的<ul>漂浮在{ {1}}缺少<header>标记。

我是一个HTML5时髦并在这里过度使用它吗？或者这是否过时（特别是因为<nav>标签具有所有样式，而<header>没有）不必要？

Answer 1

这似乎是一个非常合理的结构。我假设您至少使用header或nav中的一个来设置页面上的元素。两者都用于提供有关页面结构的信息。

Answer 2

井语义并不关心元素最终是否会被设置样式。它关心以可理解的方式概述页面。通过将所有这些链接放在带有徽标的<header>元素中，它们并不一定意味着什么。但是通过将它们放在<nav>元素中，你会指示它的导航，这意味着相当多，即使用户通过样式不清楚<nav>元素的存在。

我个人不会在nav元素中使用额外的无序列表。我从来没有真正理解使用列表进行导航而不是额外的样式元素的论点，这对我来说似乎是非语义的。

Answer 3

你看起来很棒。如果您想挑剔，那么您的标题徽标可能位于导航栏外（您可以使用css浮动导航以适应空间限制）。但是，由于您的徽标可以说是导航的一部分（因为它是您的主页链接），我认为您可以将其包含在内。

Boilerplate有点令人生畏，所以我想向人们展示这个作为参考：https://github.com/impressivewebs/Easy-HTML5-Template/blob/master/index.html

HTML5对HTML5的影响是不是很糟糕？

3 个答案: