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

Does HTML allow placing buttons inside navigation section?

spec says 以下关于 <nav> 元素(强调我的):

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

它从来没有具体说 <button> 是不允许的,也没有任何地方说只有 <a> 元素应该用于导航(但它提到 "links"),但是所有的例子似乎是列表中的一堆锚点。不是列表的 one example (11) 内部仍然只有用于导航的锚元素。

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

那么,<nav>里面允许有按钮元素吗?

取决于你如何定义"allowed"。

它是有效的 HTML,但您可能需要阅读有关辅助功能以及按钮(应指示可点击操作)和 link(应导航到某处)之间的区别。

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

在 HTML 5.2 中,section 4.8. 是关于 links:

Links are a conceptual construct, created by a, area, and link elements, that represent a connection between two resources […]

正如人们所期望的那样,a ("a hyperlink"), area ("a hyperlink"), and link ("the link(s)" etc.), all refer to links, while the definitions of button and input 的定义并非如此。

所以:

  • nav 元素应包含具有 href 属性的元素 (a/area/link)。否则一开始就没有必要使用 nav(除了例外)。

  • nav 元素还可以包含按钮。例如,用于在显示所有级别的导航和仅显示顶级导航之间切换的按钮。 (但是,如果按钮用于导航,它们应该是链接而不是按钮。)

HTML5 标准允许 <nav> 标签内的任何类型的流内容,并且 <button> 标签被视为流内容,但出于语义原因,您应该考虑避免使用它们.基于 <button> 的按钮是 UI 元素,它们完全由 javascript 驱动(或者在一些棘手的场景中,使用表单时浏览器的默认行为)没有任何功能或对第三个语义的引用当事人参考。因此,在 <nav>-tags 内使用 <button>-tags 对于 clients/robots 没有任何意义,他们在不考虑 javascript.

的情况下进行操作

现代 UI-框架,如 Bootstrap、Semantic-UI 或其他框架确实提供了以多种方式实现按钮的能力(以及 <button>-标签作为 <a>-标签)。考虑到这些能力,出于语义原因,您应该更愿意依赖 <a> 基于标签的按钮。