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>
基于标签的按钮。
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
, andlink
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>
基于标签的按钮。