HTML <nav> Tag

The HTML <nav> tag represents a navigational section of the HTML document.

A navigational section is a section of a document that links to other documents or to parts within the document.

The <nav> element is primarily intended for sections that consist of major navigation blocks (such as sitewide navigation etc). Links such as the terms of service, the home page, and a copyright page don't need to be enclosed in <nav> tags. These types of links often appear in the footer section of the document. If so, marking them up inside <footer> tags is sufficient (i.e. no need to enclose them in <nav> tags).

Syntax

The <nav> tag is written as <nav></nav> with the navigation content inserted between the start and end tags.

Like this:

Examples

Basic Tag Context

Here are two examples that demonstrate where the <nav> element can go within an HTML document. These are simply examples, the element is not restricted to these contexts. The <nav> element can appear anywhere that "flow content" is expected (basically, anywhere within the <body> element).

Inside a <header> Element

In this example, the <nav> element appears within the <header> element.

Anywhere With the <body> Element

In this example, the <nav> element appears on its own within the body of an HTML document. As mentioned, the <nav> can appear anywhere that "flow content" is expected, which is basically anywhere within the <body> element.

Lists

Navigation items that appear as a list should still be included within an HTML list. Here, the navigation items appear within a <ul> element that is inside a <nav> element.

Adding Styles

Navigational lists can be styled so that they appear more like navigation than a bullet list.

Here, we use CSS to apply styles to the elements that are inside the <nav> element.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <nav> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <nav> tag/element.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <nav> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <nav> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The <nav> tag was introduced in HTML5.

For more information on this element, see HTML5 <nav> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <nav> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <nav> Tag.

Tag Details

For more details about the <nav> tag, see HTML5 <nav> Tag.

Specifications

Here are the official specifications for the <nav> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

Related