5

所以我一直在玩弄我正在重新设计的网站的 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>因为我有空间限制并且我删除了明确的主页链接（我的主页只是子页面内容的摘要，其中包含指向它们的内联链接）。所以从语义上讲，我假设 HTML5 文档应该同时具有<header>和<nav>. 毕竟，一个<nav>单独的并不意味着它是主页导航（我<nav>用来包装我的面包屑和页脚链接），我觉得我的<ul>浮动<header>缺少一个<nav>标签。

那么我是一个 HTML5 潮人并在这里过度使用它吗？或者这种过度标记（特别是因为<header>标记具有所有样式，而<nav>没有）是不必要的？

4

3 回答 3

2

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

于 2012-08-15T01:10:29.743 回答
1

好吧，语义并不关心元素最终是否会被样式化。它关心以易于理解的方式概述页面。通过将所有这些链接放在<header>带有徽标的元素内，它们不一定意味着任何东西。但是通过将它们放在一个<nav>元素中，您表明它是导航，这意味着很多，即使<nav>通过样式对用户来说元素的存在是不明确的。

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

于 2012-08-15T01:11:37.840 回答
1

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

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

于 2012-08-15T01:16:34.470 回答