HTML5 <nav> Tag

The HTML <nav> tag is used to represent a section of a page that links to other pages or to parts within the page: a section with navigation links.

The only content permitted inside this element is flow content. Both the starting and ending tag are mandatory for this element. The parent of the <nav> tag can be any element that accepts flow content.

User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of this content.

Not all links of a document must be in a <nav> element, which is intended only for major block of navigation links. Typically the <footer> element often has a list of links that don’t need to be in a <nav> element.

A document may have several <nav> elements. For example, one for site navigation and one for intra-page navigation.

The following style is applied to this element by default:

nav {
  display: block; 
}

Here is an example of using this tag:

<nav>
  <ul>
    <li><a href="http://tutorialio.com/html/">HTML Reference</a></li>
    <li><a href="http://tutorialio.com/css/">CSS Reference</a></li>
    <li><a href="http://tutorialio.com/javascript/">JavaScript Reference</a></li>
  </ul>
</nav>

It is not mandatory for a nav element to only contain a list, it can contain other kinds of content as well. For example, in this navigation block, links are provided in prose:

<nav>
  <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 thus 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="http://games.example.com/">"games"</a>.
  Another more boring-looking exit is labeled <a  href="http://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>

Attributes

This element only accepts global attributes.

Examples

See the Pen HTML nav Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <nav> element on MDN.
  2. You can also read the HTML <nav> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top