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.

The <nav> element accepts the following attributes.

AttributeDescription
None 

Global Attributes

The following attributes are standard across all HTML 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 Handlers

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.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.