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.
Breadcrumb trail navigation section
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.
Drop-Down Menu Demo
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
Example of <nav> tag with breadcrumb trail
(see breadcrumb trail navigation section demo above)
<nav> <a rel="up up" href="../../index.html">HTML 5</a> >  <a rel="up" href="../index.html">HTML Tags</a> >  <b>HTML <nav> 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 › HTML Tags › HTML <a href> Tag › ExamplesTo code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:
- elements with
itemscope="itemscope"
(a boolean attribute) anditemtype="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>
Drop-Down Menu
(see toolbar with drop-down menu demo above)
<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="<menu>"> <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.