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.
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.
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.
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>
For information about global attributes refer to this list of global attributes in HTML5.
For information about global events refer to this list of global events in HTML5.