HTML 是否允许在导航部分中放置按钮？

Question

spec says 以下关于<nav> 元素（强调我的）：

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

它从来没有明确说<button>是不允许的，也没有说只有<a>元素应该用于导航（但它提到了“链接”），但所有的例子似乎都是一堆锚点列表。不是列表的one example (11) 仍然只有用于导航的锚元素。

next example (12) 显示了应用程序内的导航示例，但再次使用了锚点。

那么，<nav> 中是否允许按钮元素？

Answer 1

在 HTML 5.2 中，section 4.8. 是关于链接：

链接是一个概念结构，由a、area 和link 元素创建，代表两个资源之间的连接[…]

正如人们所料，a（“超链接”）、area（“超链接”）和link（“链接”等）的定义均参考链接，而 button 和 input 的定义没有。

所以：

• nav 元素应包含具有href 属性的元素（a/area/link）。否则一开始就不能保证使用nav（例外除外）。

• nav 元素也可能包含按钮。例如，用于在显示所有导航级别和仅显示顶级导航之间切换的按钮。 （但是，如果按钮用于导航，则它们应该是链接而不是按钮。）

Answer 2

HTML5 标准允许 <nav>-tags 和 <button> 标签内的任何类型的流内容被视为流内容，但出于语义原因，您应该考虑避免使用它们。基于<button> 的按钮是完全由javascript 驱动的UI 元素（或者在某些棘手的情况下，使用表单时浏览器的默认行为），没有任何功能或对第3 方引用的语义引用。因此，在 <nav>-tags 中使用 <button>-tags 对于在不考虑 JavaScript 的情况下进行操作的客户端/机器人来说毫无意义。

Bootstrap、Semantic-UI 等现代 UI 框架确实提供了以多种方式实现按钮的能力（如 <button>-tags 和 <a>-tags）。考虑到这些能力，出于语义原因，您应该更喜欢依赖基于<a>-tag 的按钮。

Answer 3

取决于您如何定义“允许”。

它是有效的 HTML，但您可能需要了解可访问性以及按钮（应该表示可点击操作）和链接（应该导航到某处）之间的区别。

http://web-accessibility.carnegiemuseums.org/content/buttons/