<导航> 或 <菜单> (HTML5)

Posted 2023-02-21

【中文标题】<导航> 或 <菜单> (HTML5)

【英文标题】：<nav> or <menu> (HTML5)

【发布时间】：2011-06-25 13:59:53

【问题描述】：

W3Schools.com，我很确定我记得看到 W3C.org 声明 <menu> 应该用于工具栏菜单和列出表单控制命令。

那么，我应该为我的主菜单使用哪一个？ Nav，还是Menu？有关系吗？

【问题讨论】：

您可能想阅读w3fools。

什么是“表单控制命令”？

【参考方案1】：

nav 用于内部链接组（a 元素）。一般来说，这意味着链接应该转到单独的页面，或者在 AJAX 页面的情况下更改内容。单击nav 项目时，预计会发生某种内容变化。

menu 用于控件组（a、input、button）。通常这意味着输入应该在页面内执行功能。当点击 menu 项目时，预计会有某种 javascript 交互。

nav：网站的导航。

menu：Web 应用程序的菜单。

【讨论】：

有趣的事实：规范允许将<li> 元素直接嵌套在<menu> 标签下，而不需要<ul> 列表。要求是<menu> 的type 属性被省略或设置为"toolbar"。请参阅 the <li> element 和 the <menu> element 的规范。

有人可以指出我在 W3C html5 规范之一中的<menu> 吗？我在WHAT WG version 中找到它，但在latest W3C HTML 5.3 draft 中找不到。

【参考方案2】：

这是一个HTML5Doctor post on nav，其中有一节介绍了它与menu 的不同之处（基本上，在实际应用中使用它）。看起来你想要nav。

【参考方案3】：

<menu> 通常用于上下文菜单。

MDN 有很好的文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

【参考方案4】：

获得此答案的最佳位置是他们自己的 HTML 5 标准。 菜单在HTML 5.1 2nd Edition中定义。

它，“...代表一组命令。”

Nav 在HTML 5 中定义。

它是，“......一个页面的一部分，链接到其他页面或其中的部分 页面：带有导航链接的部分。”

有一些我没有包括但认为很重要的导航注释，但我认为最好让您自己从标准中获得定义。

本文中标记为答案的定义接近正确，但其中包含使答案本身错误的无关陈述。

【参考方案5】：

<nav> 是一个部分（如 <section> 或 <article>），因此它将出现在您的 HTML 文档大纲中。因此，我会在 99% 的时间使用<menu>。对我来说，<nav> 是<section> 和<menu> 的混合体，另外还有一个限制是<nav> 应该专门用于导航，而<menu> 可以用于任何可能被称为菜单的东西（包括导航栏）。所以大部分导航栏，虽然是导航栏，但并不符合<nav>的严格要求，<menu>更合适。

在我的 Web 开发职业生涯中，我从未发现我希望导航栏成为文档大纲的一部分。

【讨论】：

这是不正确的。您应该很少（如果有的话）在非网络应用程序的网站上使用<menu> - 99% 的时间，您的导航“菜单”将是指向其他页面或其他部分的静态链接根据规范，该页面是 <nav> 的用途。

@IvanDurst，我的意思是，如果您只是构建静态链接列表，nav 不是一个好的标签选择，因为nav 是一个部分元素，因此它将成为文档大纲，就好像它是一个带有标题和内容的部分。这实际上是一种罕见的情况，您希望您的 nav 像一个部分一样工作。 menu 只是作为语义替换的建议。我在规范中没有看到任何内容说它不能以这种方式使用。似乎很合适。但是，如果您出于某种原因认为该菜单仅适用于您定义为 Web 应用的内容，那么我建议您使用 ol 或 ul 作为替代。

根据兼容性表here，此时<menu>仍然支持不佳。 （Chrome 真的不支持它吗？？）此外，您可以通过向另一个元素（例如 div 或 nav）提供 role="menu" 属性来实现完全相同的语义。 role 属性覆盖任何元素的默认语义。