Search code examples
htmlsemantic-markup

Does HTML allow placing buttons inside navigation section?


The spec says the following about the <nav> element (emphasis mine):

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.

It never specifically says that <button> is disallowed, and nowhere it says that only <a> elements should be used for navigation (yet it mentions "links"), but all the examples seem to be a bunch of anchors in lists. The one example (11) that isn't a list still has only anchor elements for navigation inside.

The next example (12) shows an example of navigation within application, but uses anchors again.

So, are button elements allowed inside <nav>?


Solution

  • In HTML 5.2, section 4.8. is about links:

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

    As one would expect, the definitions of a ("a hyperlink"), area ("a hyperlink"), and link ("the link(s)" etc.), all refer to links, while the definitions of button and input don’t.

    So:

    • A nav element should contain elements with href attribute (a/area/link). Otherwise it wouldn’t be warranted to use nav in the first place (exceptions aside).

    • A nav element may also contain buttons. For example, a button that is used to toggle between showing all levels of the navigation, and showing only the top-level. (However, if the buttons are used for navigation, they should be links instead of buttons anyway.)