nav element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The nav element is a container for navigational links, supposed to provide ways to access the sections of a website, as well as to external documents. The links inside this element, are supposed to belong to major navigation blocks only.

The nav element can be a good way to improve a website's accessibility. Some browsers, like voice browsers, can provide the information in this element on request, or ignore it when looking for the main content.

Links usually found at the bottom of a document (contact, share, legal, etc.) are not required to belong inside a nav element. The footer element alone is enough in such cases.

Examples

Below you'll see a straight list of links to the main sections of a website, correctly wrapped in a nav element. This navigation block is preceding the main content of the document, as could be found in real examples.

Note that nav sections can also be used to provide navigational links inside the page. This is the case of tables of content as the one used at the top of this page.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/tutorials.html">Tutorials</a></li>
    <li><a href="/reference.html">Reference</a></li>
    <li><a href="/tools-resources.html">Resources</a></li>
    <li><a href="/contactus.php">Contact me</a></li>
  </ul>
</nav>
<section>
  <h1>HTML tutorials and reference</h1>
  <p>This is a website dedicated to provide a set of tutorials for the most used language of the web...</p>
</section>

HTML tutorials and reference

This is a website dedicated to provide a set of tutorials for the most used language of the web...

Our second example shows an innovative navigation section. There, links to the main sections of the website are presented in prose.

<nav>
  <p>Besides the <a href="/">home</a>, you'll see the main content of the website divided in three sections: the <a href="/tutorials.html">tutorials</a>, the <a href="/reference.html">reference</a> and the <a href="/tools-resources.html">resources</a>. Don't forget to <a href="/contactus.php">contact me</a> in case you have any inquiry.</p>
</nav>

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.