This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <nav> element

The <nav> element represents a section of navigation links. It is primarily intended for major navigation blocks that help the reader move around the current page or between pages.

Common examples include a main site menu, table of contents, previous-and-next links, breadcrumb trail, or a group of important section links.

A few links in a paragraph or footer do not usually need their own <nav>. The question is whether the group serves as a navigation area in the page's structure, rather than simply how many links it contains.

The links inside <nav> are often placed in a list, but they do not have to be. A list is useful when the navigation is clearly a set of items. Simple inline navigation may use plain links if that structure is clearer.

The element creates a navigation landmark: a named kind of page region that screen-reader users can jump to. A page can have several navigation areas, such as a site menu and a table of contents for the current page.

Give different navigation areas descriptive labels so readers can tell them apart. Use aria-label to supply a name, as below, or aria-labelledby to refer to the id of a visible heading. If the same set of navigation links is repeated elsewhere on the page, use the same label for both copies. A label is optional when there is only one navigation area.

Attributes: GLOBALS.

Typical layout:
<nav aria-label="HTML sections">
  <ul>
    <li><a href="section_tag_F.html">Section</a></li>
    <li><a href="article_tag_F.html">Article</a></li>
    <li><a href="aside_tag_F.html">Aside</a></li>
  </ul>
</nav>
Visual representation: