The <nav> tag creates a container for navigation elements.
It can hold navigation menus, quicklinks, table of contents, etc.
A <nav> container with 4 navigation links.
<nav>
<a href="javascript:alert('Going to Introduction')">Introduction</a> <br />
<a href="javascript:alert('Going to What Is HTML')">What is HTML</a> <br />
<a href="javascript:alert('Going to HTML Syntax')">HTML Syntax</a> <br />
<a href="javascript:alert('Going to HTML Elements')">HTML Elements</a>
</nav>
nav = navigation
The <nav> element contains navigational links.
A page can have multiple <nav> elements.
The <nav> tag is a semantic tag that clearly conveys its content.
A <nav> element with a set of main menu items.
<nav>
<a href="javascript:alert('Home was clicked')">Home</a> |
<a href="javascript:alert('Gallery was clicked')">Gallery</a> |
<a href="javascript:alert('Contact Us was clicked')">Contact Us</a> |
<a href="javascript:alert('About was clicked')">About Us</a>
</nav>
The <nav> element has no attributes, but it does accept global attributes.
The following are commonly used.
| Attribute | Value | Description |
|---|---|---|
| id | value | Provides the nav element with a unique identifier. |
| class | classnames | Assigns one or more classnames to the nav element. |
| style | CSS-values | Assigns CSS style values to the nav element. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the nav element is hidden. |
For additional global attributes see our global attributes list.
The <nav> tag is part of a group of semantic tags
that help with creating the layout of web pages.
This group is referred to as the Layout tag group.
Together, they allow you to create comprehensive page layouts.
An example layout and a list of layout tags below.
| Element | Description |
|---|---|
| <header> | Defines a header section on a page or a section of a page |
| <main> | Creates a container for the main content of the page |
| <footer> | Defines a footer section on a page or a section of a page |
| <nav> | Creates a container for navigation links |
| <aside> | Creates a content area that is related to the primary content on a page |
| <article> | Defines a container for independent and self contained text |
| <section> | Defines a piece of content that can stand on its own |
| <div> | Creates a division or section on a page |
Note: Layout tags define areas on a page that contain content. By default they have no visual appearance, but are often styled -- for example with a border or background color.
Here is when <nav> support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
11.0 | Dec 2010 |
 Safari
|
5.0 | Jun 2010 |
