<nav>: The Navigation Section element
<nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
|Content categories||Flow content, sectioning content, palpable content.|
|Permitted content||Flow content.|
|Tag omission||None, both the starting and ending tag are mandatory.|
|Permitted parents||Any element that accepts flow content.|
|Implicit ARIA role||
|Permitted ARIA roles||No
This element only includes the global attributes.
- It's not necessary for all links to be contained in a
<nav>is intended only for a major block of navigation links; typically the
<footer>element often has a list of links that don't need to be in a
- A document may have several
<nav>elements, for example, one for site navigation and one for intra-page navigation.
aria-labelledbycan be used in such case to promote accessibility, see example.
- User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.
In this example, a
<nav> block is used to contain an unordered list (
<ul>) of links. With appropriate CSS, this can be presented as a sidebar, navigation bar, or drop-down menu.
<nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
The semantics of the
nav element is that of providing links. However a
nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:
<nav> <h2>Navigation</h2> <p> You are on my home page. To the north lies <a href="/blog">my blog</a>, from whence the sounds of battle can be heard. To the east you can see a large mountain, upon which many <a href="/school">school papers</a> are littered. Far up this mountain you can spy a little figure who appears to be me, desperately scribbling a <a href="/school/thesis">thesis</a>. </p> <p> To the west are several exits. One fun-looking exit is labeled <a href="https://games.example.com/">"games"</a>. Another more boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>. </p> <p> To the south lies a dark and dank <a href="/about">contacts page</a>. Cobwebs cover its disused entrance, and at one point you see a rat run quickly out of the page. </p> </nav>
|HTML Standard |
BCD tables only load in the browser