<nav>或<menu>(HTML5)

108

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

那么,我应该在主菜单中使用哪一个?Nav还是Menu?有关系吗?

答案: 根据W3C.org的声明,<menu>应该用于工具栏菜单和列出表单控制命令。至于主菜单,可以使用NavMenu。它们都是合适的选择,具体取决于您的个人偏好和项目需求。

39
你可以阅读w3fools - zzzzBov
什么是“表单控件命令”? - Mads Skjern
5个回答

170

nav 用于内部链接(a元素)的分组。通常这意味着链接应该跳转到单独的页面,或在 AJAX 页面中更改内容。点击 nav 项时,预计会发生某种内容变化。

menu 用于控件(ainputbutton)的分组。通常这意味着输入应在页面内执行某个功能。点击 menu 项时,预计会发生某种 JavaScript 交互。

nav:网站的导航栏

menu:Web 应用程序的菜单


8
有趣的事实:规范允许直接在 <menu> 标签下嵌套 <li> 元素,而无需使用 <ul> 列表。要求是 <menu>type 属性被省略或设置为 "toolbar"。请参阅 the <li> elementthe <menu> element 规范。 - tomekwi
有人能指引我到 W3C HTML5 规范中的 <menu> 吗?我在 WHAT WG 版本 中找到了它,但在 最新的 W3C HTML 5.3 草案 中没有。 - Garret Wilson

11

这里有一篇关于navHTML5Doctor文章,其中有一个部分说明了它与menu的区别(基本上,在实际应用中使用nav)。看起来你需要nav


2

这已经不再有效了。引用你回答中的链接:注意:在 HTML 规范的早期版本中,<menu> 元素还有一个额外的用例作为上下文菜单。这个功能被认为是过时的,并不在规范中。 - lukas.j

2
最好的获取答案的地方是HTML5标准本身。

菜单HTML 5.1第二版中定义。

它表示一个命令组。

导航栏HTML 5中定义。

它是页面上链接到其他页面或页面内部部分的部分:具有导航链接的部分。

关于导航栏的注释我没有包含,但我认为最好从标准中自己获取定义。
此帖中标记为答案的定义接近正确,但其中有多余的陈述使答案本身错误。

0

<nav>是一个类似于<section><article>的部分,因此它将出现在您的HTML文档大纲中。因此,我99%的情况下会使用<menu>。对我来说,<nav><section><menu>之间的混合体,并增加了<nav>应专门用于导航的限制,而<menu>可以用于任何可能被称为菜单的东西(包括导航栏)。因此,大多数导航栏,尽管它们是导航栏,但不符合<nav>的严格要求,<menu>更合适。

在我的Web开发职业生涯中,我从未遇到过想要将我的导航栏作为文档大纲的情况。


2
这是不正确的。你应该很少(如果有的话)在非 Web 应用程序的网站上使用 <menu> - 99% 的时间,你的导航菜单将是指向其他页面或页面上其他部分的静态链接,这就是规范中 <nav> 的作用。 - Ivan Durst
@IvanDurst,我的观点是,如果你只是在建立一个静态链接列表,那么nav不是一个好的标签选择,因为nav是一个部分元素,所以它将成为文档大纲的一部分,就像它是一个带有标题和内容的部分一样。这实际上是一个罕见的情况,你希望你的nav像一个部分一样起作用。menu只是作为语义替代的建议。我没有看到规范中说它不能被用于这种方式。似乎很合适。但如果你出于某种原因认为菜单只适用于你定义的Web应用程序,那么我建议使用olul作为替代。 - Nick Manning
根据此处的兼容性表,目前<menu>的支持仍然很差。(难道Chrome真的不支持吗??)此外,您可以通过为另一个元素(例如div或nav)提供role="menu"属性来实现完全相同的语义。 role属性覆盖任何元素的默认语义。 - brennanyoung

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接