HTML5 导航标签正确用法

Posted 2023-04-12

【中文标题】HTML5 导航标签正确用法

【英文标题】：HTML5 nav tag correct usage

【发布时间】：2011-07-07 22:01:29

【问题描述】：

<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

在这两个<ul> 周围单独使用<nav> 在语义上更正确，还是应该一个导航包两个？

是否也适合使用 nav 标签来环绕我的页脚菜单项？

【参考方案1】：

引用规格：

nav 元素代表一个部分 链接到其他页面的页面或 到页面内的部分：一个部分 带有导航链接。

并非页面上的所有链接组都需要 在导航元素中 - 仅部分 包括主要导航 块适用于导航 元素。特别是，很常见 让页脚有一个简短的列表 链接到网站的各个页面，例如 作为服务条款，家 页和版权页。页脚 单独的元素就足够了 案例，没有导航元素。

因此，您可以随意将两者包装在一个导航标签中。不要包装页脚，而是在这里使用页脚标签:)

在此处阅读规格：http://dev.w3.org/html5/spec/Overview.html#the-nav-element

【参考方案2】：

寻找 nav 的原因已经进行了多年。现在只需在谷歌周围搜索，您就会找到有关问题的日期，这些日期可以追溯到它的介绍。到目前为止，我发现 nav 的一个实际用途是将它与 css 中的样式相关联。在您说之前，有更好的方法可以做到这一点，请考虑程序员不是唯一做页面标记的人。对于一个以设计网页为生的商业艺术家来说，最好有一个简单的标签，而不是考虑类和子类。如果你关注了不同群体的讨论一段时间，你会觉得我很可能是对的。许多页面开发人员都是关于风格的——他们是艺术家，而不是程序员。

再确认一下：如果您查看 HTML5 中的新结构标签，您可以很容易地理解委员会想要明确定义页面的主要元素的想法。每个主要元素的外观和行为都可能不同。如果您想设计一个典型的网页，那么如果有人已经为页面部分标签命名，那么您可以直接着手设计它们的样式，这会非常方便。在您提供导航部分的页面部分中添加一个 nav 标记。你问那是什么？它不是其他已经预定义的部分之一，例如页脚或侧边栏。 Here's a tutorial showing where the author believes the navigation section is - 就在你期望的地方。

没关系。如果我想构建一个和其他一百万个页面一样的页面，而我唯一关心的是让我的颜色选择和艺术元素与其他页面不同，那么整个事情都是非常常规的。作为一名程序员，我并不总是想要那样。我希望灵活地以合乎逻辑且易于使用的方式完成所设想的功能需求。如果这更容易而不是更难，那就太好了。所以，只是为了提供一点对比来表明这个故事有两个方面——我为 HTML5 中框架集和框架的丢失感到遗憾。 iFrame 是较差的替代品。

那些对风格感兴趣而不关心可设计的结构和功能的获胜者一直希望将开发推向 css，这不是一种编程语言。 RE：丢帧，看来我会被推回到大多数网页由表格构成的时代；除了他们希望我在 css 中定义表格而不是在页面中使用标签。他们似乎正在尽一切可能阻止动态页面上的任何进展。只允许整页重新加载来重组事物。 （如果您想在具有相同页面结构的情况下从一张图片淡入到另一张图片，则不正确。）

也许我说的比回答这个问题的要求要多，但我认为将范围扩大到整体背景会很有用。

【讨论】：

投了赞成票；有用的答案。 WTF 它有 -4 吗？

我想人们可能会因为不同意所表达的意见而投了反对票。 <nav> 不仅仅是一个样式快捷方式；它在语义上是一个非常有用的标签。它可以帮助屏幕阅读器（用于可访问性）和网络爬虫（确保它们不会索引与页面内容不直接相关的文本）。另外，我不明白您为什么继续哀叹框架集的丢失（我看不出与关于导航语义的讨论的相关性）。但是，我要补充一点，使用 AJAX 和 HTML5 历史 API 等技术，框架集现在肯定已经过时了吗？

【参考方案3】：

我同意马丁的观点。将它们包裹在一个导航元素中。

至于页脚，可以使用另一个 nav 元素，只要元素在站点内导航。

【讨论】：

@Ian：规范特别提到页脚不需要导航元素。

他们确实如此，我多么失职。不过很奇怪，因为它仍然是导航。

@Ian 所以，为了清楚起见，可以在任何一个页面上显示 两个 nav 元素，只要它们都明确符合规范？

@Donald 是的，当然。如果您查看 Martin 发布的链接（规范），那么下面还有一个示例，其中包含多个 nav 元素。

@Ian 很高兴知道，谢谢。不知道怎么做。完全免费且无关，顺便说一句：你的博客太棒了！