Definition and Usage

The <nav> tag represents a section that contains links for navigation, either to other web pages or to specific parts within the current page.
Common examples include menus, tables of contents, and indexes.

Basic Example

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>nav Tag Example</title>
    </head>
    <body>
        <header>
            <h1>Web Page Title</h1>
        </header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/about">About Us</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>
        <main>
            <article>
                <h2>Main Content Title</h2>
                <p>Main content goes here...</p>
            </article>
        </main>
        <aside>
            <h3>Additional Information</h3>
            <p>This is part of the main content of the page.</p>
        </aside>
        <footer>
            <p>© copyright Web Page</p>
        </footer>
    </body>
</html>

Features

Not every group of links on a page needs to be inside the <nav> tag. This tag is primarily intended for sections that consist of major navigation blocks.
In particular, it is common for the <footer> tag to contain short lists of links to various pages such as Terms of Service, Home, or Copyright. In such cases, the <footer> tag alone is sufficient. While you may use the <nav> tag in these situations, it is generally not necessary.

The <nav> tag is mainly used for sections that serve as the primary navigation block.

In the following example, there are multiple areas with links on the page, but only one of them is considered the main navigation area.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>nav Tag Example</title>
    </head>
    <body>
        <header>
            <h1>Web Page Title</h1>
            <p> <!-- This group of links is supplementary reference links,
                     not considered the site's main navigation area. -->
                <a href="news.html">News</a> -
                <a href="blog.html">Blog</a> -
                <a href="forums.html">Forums</a>
            </p>
            <p>Last updated: <span>2025-04-01</span></p>
            <nav> <!-- Considered the primary navigation area -->
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/about">About Us</a></li>
                    <li><a href="/services">Services</a></li>
                    <li><a href="/contact">Contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <article>
                <h2>Main Content Title</h2>
                <p>Main content goes here...</p>
            </article>
        </main>
        <aside>
            <h3>Additional Information</h3>
            <p>This is part of the main content of the page.</p>
        </aside>
        <footer>
            <p>© copyright Web Page</p>
        </footer>
    </body>
</html>

Practical Examples

Here are some practical examples of using the <nav> tag.

Main Navigation Menu

The most common use case is to wrap the primary navigation menu of a website with the <nav> tag. This menu contains links to the main sections or pages of the site.

HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

In-Page Navigation Menu

You can also define supplementary navigation menus within a page. These menus provide more detailed navigation inside the page. For example, on a blog page, you might have a menu to filter posts by category or tag.

HTML 
<nav>
    <ul>
        <li><a href="#all">All</a></li>
        <li><a href="#tech">Tech</a></li>
        <li><a href="#lifestyle">Lifestyle</a></li>
        <li><a href="#travel">Travel</a></li>
    </ul>
</nav>

<!-- Blog Content Sections -->
<section id="all">
    <!-- All category posts -->
</section>
<section id="tech">
    <!-- Tech category posts -->
</section>
<section id="lifestyle">
    <!-- Lifestyle category posts -->
</section>
<section id="travel">
    <!-- Travel category posts -->
</section>

In the example above, users can filter posts by category and scroll to the corresponding section to view related content. Each link is designed to navigate to a specific location on the page using the id and href attributes.

Breadcrumbs

Breadcrumbs visually show the user their current location on the site and allow them to navigate back to previous pages.

HTML 
<nav>
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/products/category1">Category 1</a></li>
        <li aria-current="page">Current Page</li>
    </ol>
</nav>

Using breadcrumbs, the user can see the path “Home > Products > Category 1 > Current Page” and click each part to navigate to the corresponding page.

Pagination

Pagination divides content into multiple pages and provides navigation between them, often used in forums or boards.

HTML 
<nav>
    <ul>
        <li><a href="/page/1">Previous</a></li>
        <li><a href="/page/2">2</a></li>
        <li><a href="/page/3">3</a></li>
        <li><a href="/page/4">4</a></li>
        <li><a href="/page/5">5</a></li>
        <li><a href="/page/6">Next</a></li>
    </ul>
</nav>

Simple Page Navigation

In this example, the <nav> tag contains text links rather than a list. The <nav> element does not have to include a list; it can contain other types of content as well.

HTML 
<nav>
    <h3>Navigation</h3>
    <p>
        You are on my homepage.  
        To the north, there is <a href="/blog">my blog</a>, 
        and sounds of activity can be heard. To the east, a large mountain is visible, 
        where <a href="/school">school projects</a> are scattered.  
        On the mountain, a small figure resembling me seems to be frantically working 
        on a <a href="/school/thesis">thesis</a>.
    </p>
    <p>
        To the west, there are several exits.  
        One exit, labeled "Games", looks fun, while another, labeled "ISP", looks less interesting.
    </p>
    <p>
        To the south, there is a dark, quiet <a href="/about">Contact Page</a>.  
        A spider web hangs across the entrance, and occasionally a mouse scurries out of the page.
    </p>
</nav>

Accessibility Considerations

In HTML, a landmark refers to an element that helps describe the structure of a web page and improves accessibility. Landmarks assist users in understanding and navigating a page, and they allow assistive technologies, such as screen readers, to effectively convey the layout and structure.

For more details about landmarks, see the ARIA Landmarks Example.

The <nav> tag represents a primary navigation area on a page. The value of the role attribute is navigation.

As such, the <nav> tag plays an important role in conveying the layout and structure of a web page

Assigning Meaning to <nav> with the role Attribute

If you cannot use the <nav> tag, you can assign the same meaning using the role attribute.

Here is an example of using a <div> element with no inherent semantic meaning as a landmark:

HTML 
<div role="navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</div>

Except in cases where browser compatibility prevents using the <nav> tag, it is recommended to use <nav> rather than role="navigation".

Usage Restrictions for <nav>

The <nav> tag must not be a descendant of the <address> tag.

  • The <address> tag is a special tag used to represent contact information for the document or its ancestor <article> tag.
  • For example, it may contain "contact information" such as the author's name, email, company address, phone number, or website link.
  • In contrast, the <nav> element defines a collection of primary navigation links within a document or page.
  • That is, navigation is unrelated to contact information, and placing a <nav> inside an <address> tag would obscure the original meaning of <address>, which is why this placement is restricted.
  • Therefore, the specification does not allow the <nav> tag (or other sectioning content tags such as <article>, <aside>, <section>, <header>, <footer>) to be included within an <address> tag.

Related Attributes

The <nav> tag has no tag-specific attributes. All global attributes can be used with this tag.

Technical Syntax Summary

Technical Syntax Summary of the <nav> tag
Permitted parents The <nav> tag must not be a descendant of the <address> tag.
Implicit ARIA role navigation
Permitted ARIA roles No role permitted

Browser compatibility

Browser compatibility for the nav tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<nav> 5 12 4 5

Specifications

Specification for the nav tag
Specification
<nav> HTML Standard
#the-nav-element

References

See also