英文:
Is it correct to use the <menu> element as navigation?
问题
使用<menu>标签作为导航是否正确？像这样：
<menu>
<li><a href="#">Home</a></li>
<li><a href="#">Page one</a></li>
<li><a href="#">Page two</a></li>
<li><a href="#">Page three</a></li>
</menu>
或者它仅用于上下文菜单，就像Mozilla上的示例一样？1: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu
英文:
Is it correct to use the <menu> tag as navigation?
Like that:
<menu>
<li><a href="#">Home</a></li>
<li><a href="#">Page one</a></li>
<li><a href="#">Page two</a></li>
<li><a href="#">Page three</a></li>
</menu>
Or is it indicated only for a Context menu, like the example on Mozilla?
答案1
得分: 3
在你的示例中，你正确使用了<menu>标签，事实上这是你应该编写导航列表的方式。<menu>标签是对非语义化的<ul>的语义替代，浏览器会将它们视为相同。
根据MDN WebDocs的说法：
<menu>和<ul>元素都代表一个无序列表。主要区别在于<ul>主要包含用于显示的项目，而<menu>旨在用于交互项目。
<a> 锚点是交互元素，因此在这种情况下，应该正确使用 <menu> 作为列表容器。
然而，你的措辞是不正确的。<menu> 只是一个无序锚点列表的容器，而不是整个导航，应该使用 <nav> 元素。
例如，导航栏可能包含更多内容而不仅仅是链接：
<nav>
<img src="logo.jpg" alt="网站Logo">
<h1>目录</h1>
<menu>
<li><a href="#chapter-1">第一章</a></li>
<li><a href="#chapter-2">第二章</a></li>
<li><a href="#chapter-3">第三章</a></li>
</menu>
<input type="text" id="search-bar">
</nav>
英文:
In your exmaple you are using the <menu> tag correctly and as matter of fact that is the way you should actually code a navigation list.<br>
The <menu> tag is a sementic alternative to the unsemantic <ul> as is treated by the browser as the same.
To quote MDN WebDocs:
> The <menu> and <ul> elements both represent an unordered list of items. The key difference is that <ul> primarily contains items for display, while <menu> was intended for interactive items.
<a>nchors are interactive elements and as such the <menu> should be correctly used as a list container in that case.
However, your wording is incorrect. <menu> is only a container for the unordered list of anchors but not an entire navigation for which the <nav> element should be used.
As example a navigation bar could contain more then just links:
<nav>
<img src="logo.jpg" alt="Website Logo">
<h1>table of contents</h1>
<menu>
<li><a href="#chapter-1">Chapter 1</a></li>
<li><a href="#chapter-2">Chapter 2</a></li>
<li><a href="#chapter-3">Chapter 3</a></li>
</menu>
<input type="text" id="search-bar">
</nav>
答案2
得分: 2
根据规范：
> <menu> 元素 表示一个工具栏，由其内容组成，以无序列表的形式呈现（由 li 元素表示），其中每个元素表示用户可以执行或激活的命令。
这在工具栏中语义上是适当的。一个工具栏的示例是富文本格式菜单，用户可以按下“加粗”按钮以激活文本的加粗样式。
页面导航应使用 <nav> 元素 进行标记。如果您的导航是一组链接，则在该 <nav> 中适当使用 <ul> 或 <ol>，而不是 <menu>。
英文:
No. According to the spec:
> The <menu> element represents a toolbar consisting of its contents, in the form of an unordered list of items (represented by li elements), each of which represents a command that the user can perform or activate.
It's semantically appropriate for toolbars. One example of a toolbar is a rich text formatting menu, where users can press a "bold" button to activate bold styling on their text.
Page navigation should be marked up using a <nav> element. If your navigation is a list of links, use a <ul> or <ol> inside that <nav> as appropriate, but not a <menu>.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论