HTML <nav> Tag - Navigation Section

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <nav> Tag in HTML 5

The <nav> tag is used to create a navigation section on a web page, a section whose primary purpose is to provide links to specific areas within the page or to other web pages. It is one of the sectioning tags in HTML 5.

A navigation section with a series of inline hypertext links can be used to create a breadcrumb trail:

This is an actual working demo of the breadcrumb trail example code below.

This is an actual working example of the drop-down menu example code below. It shows how to implement a drop-down menu without JavaScript. It only requires CSS, which works even if JavaScript is disabled for some reason.

<nav> Tag Syntax

Rules for coding HTML `nav` elements

<body>
   ...
   ... flow content expected ...
   <nav>
      ... flow content ...
   </nav>
   ...
</body>

Inside an element where flow content is allowed, code one or more optional nav elements.
Begin each nav element with a starting <nav> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <nav> tag as appropriate.
End the nav element with a matching </nav> closing tag.
Inside the nav element, code the appropriate flow content.

<nav> Content Model

Content of the <nav> Tag

The content of the nav element can include HTML comments, text content and any tags that can be used in flow content.

<nav> Tag Attributes

Attributes of the <nav> tag

global attributes

The only attributes that can be coded on the <nav> tag are the common HTML attributes.

<nav> Tag Examples

Examples of the `nav` tag in HTML 5

<nav>
   <a rel="up up" href="../../index.html">HTML 5</a>&#160;&gt;&#160;
   <a rel="up" href="../index.html">HTML Tags</a>&#160;&gt;&#160;
   <b>HTML &lt;nav&gt; tag</b>
</nav>

As shown in the example above, the value up may be specified more than once in the <a rel> attribute: rel="up" points to the parent document, rel="up up" points to the grandparent, and so forth.

Search Engine Friendly Navigation Section with Breadcrumb Trail

Some search engines, particularly Google, may include a breadcrumb trail in their search engine results if the links include microdata properties for a breadcrumb trail.

Search Engine Results

HTML <a href> Tag

Description, syntax, usage, attributes and examples of the HTML <a href> tag.

www.html-5.com › › ›

To code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:

elements with itemscope="itemscope" (a boolean attribute) and itemtype="http://data-vocabulary.org/Breadcrumb" identifying each link in the breadcrumb trail
an a href element with itemprop="url" indicating the target URL of each breadcrumb link
an element with itemprop="title" that provides the text for each breadcrumb link

<nav class="breadcrumb-trail">
   <ul>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
         <a itemprop="url" rel="up up up" href="/">
            <span itemprop="title">HTML 5</span>
         </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
         <a class="nobr" itemprop="url" rel="up up" href="/tags/">
            <span itemprop="title">HTML Tags</span>
         </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
         <a itemprop="url" rel="up" href="./">
            <span itemprop="title">HTML <a href> Tag</span>
         </a>
      </li>
      <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
         <a itemprop="url" href="#examples#">
            <span itemprop="title">Examples</span>
         </a>
      </li>
   </ul>
</nav>

<nav style="height: 1.5em">
<style scoped="scoped">
menu[type="toolbar"], menu[type="toolbar"] * {
   margin: 0;
   padding: 0:
}
menu[type="toolbar"] > li {
   display: inline-block;
   vertical-align: top;
   border: 2px solid #000000;
}
menu[type="toolbar"] > li > menu {
   float: left;
   width: 8em;
   background-color: #cccccc;
   text-align: center;
}
menu[type="toolbar"] > li > menu:before {
   content: attr(label);
   color: #333333;
}
menu[type="toolbar"] > li > menu > li {
   position: relative;
   z-index: 1;
   background-color: #cccccc;
   text-align: left;
   display: none;
   -moz-transition: background-color 0.3s;
   -webkit-transition: background-color 0.3s
}
menu[type="toolbar"] > li > menu:hover > li {
   display: block;
}
menu[type="toolbar"] > li > menu:hover > li:first-child {
   border-top: 2px solid #000000;
}
menu[type="toolbar"] > li > menu > li > a {
   padding: 0 1em;
   color: #333333;
   text-decoration: none;
}
menu[type="toolbar"] > li > menu:hover,
menu[type="toolbar"] > li > menu:hover:before,
menu[type="toolbar"] > li > menu > li:hover,
menu[type="toolbar"] > li > menu > li:hover > a
{
   background-color: #999999;
   color: #000000;
}
</style>
<menu type="toolbar">
   <li>
      <menu label="Sections">
         <li><a href="../../tutorials/">Tutorials</a></li>
         <li><a href="../../examples/">Examples</a></li>
      </menu>
   </li>
   <li>
      <menu label="&lt;menu&gt;">
         <li><a href="#description">Description</a></li>
         <li><a href="#syntax">Syntax</a></li>
         <li><a href="#attributes">Attributes</a></li>
         <li><a href="#examples">Examples</a></li>
         <li><a href="#whats-new">Changes</a></li>
      </menu>
   </li>
</menu>
</nav>

Changes in HTML 5 - <nav> Tag

What's new in HTML 5

The <nav> tag is one of the new elements in HTML 5. It is one of the new sectioning tags in HTML 5, which are intended to reduce the need to use <div> tags for sectioning purposes.

Differences between HTML 5 and earlier versions of HTML

The <nav> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the nav element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5