The HTML <nav> element represents a section of a page that contains important navigation links. It helps organize links used to move between pages or different parts of a website.

Key Point: Use <nav> for major navigation areas such as main menus, course menus, documentation navigation, or other important groups of navigation links.

1. What is the nav Element?

The <nav> element is a semantic HTML element used to identify a block of navigation links.

<nav>

    <a href="/home">Home</a>
    <a href="/courses">Courses</a>
    <a href="/contact">Contact</a>

</nav>

Output

2. Purpose of the nav Element

The <nav> element tells the browser and assistive technologies that the enclosed links form a navigation area.

Common examples include:

Main website navigation
Course navigation
Documentation navigation
Navigation between major sections
Other important link collections

3. Basic Navigation Menu

<nav>

    <a href="/home">Home</a>
    <a href="/about">About</a>
    <a href="/services">Services</a>
    <a href="/contact">Contact</a>

</nav>

Output

4. nav with ul and li

A navigation menu is often structured using an unordered list containing list items and links.

<nav>

    <ul>

        <li>
            <a href="/home">Home</a>
        </li>

        <li>
            <a href="/courses">Courses</a>
        </li>

        <li>
            <a href="/contact">Contact</a>
        </li>

    </ul>

</nav>

5. nav with Header

A common website structure places the main navigation inside the page header.

<header>

    <h1>Learning Portal</h1>

    <nav>

        <a href="/home">Home</a>
        <a href="/courses">Courses</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>

    </nav>

</header>

6. nav with a Main Website Menu

<nav>

    <a href="/">Home</a>
    <a href="/html">HTML</a>
    <a href="/css">CSS</a>
    <a href="/javascript">JavaScript</a>
    <a href="/contact">Contact</a>

</nav>

7. Navigation with Buttons and Links

A navigation area generally contains links that move the user to another page or location. Buttons are normally used for actions rather than navigation.

<nav>

    <a href="/home">Home</a>
    <a href="/courses">Courses</a>
    <a href="/contact">Contact</a>

</nav>

Remember: Use an anchor element when the main purpose is to navigate somewhere. Use a button when the main purpose is to perform an action.

8. Navigation Using an Unordered List

<nav>

    <ul>

        <li>
            <a href="#">Home</a>
        </li>

        <li>
            <a href="#">Courses</a>
        </li>

        <li>
            <a href="#">Tutorials</a>
        </li>

        <li>
            <a href="#">Contact</a>
        </li>

    </ul>

</nav>

9. Styling Navigation with CSS

CSS can be used to display navigation links horizontally and control spacing, colors, borders, and other visual properties.

<nav class="menu">

    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">About</a>
    <a href="#">Contact</a>

</nav>

<style>

    .menu {
        display: flex;
        gap: 20px;
    }

</style>

10. Vertical Navigation

Navigation links can also be displayed vertically using CSS.

<nav class="side-menu">

    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JavaScript</a>

</nav>

<style>

    .side-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

</style>

11. Multiple nav Elements

A page can contain more than one <nav> element when there are different meaningful navigation regions.

<header>

    <nav>

        <a href="/">Home</a>
        <a href="/courses">Courses</a>

    </nav>

</header>

<main>

    <nav>

        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#javascript">JavaScript</a>

    </nav>

</main>

Each navigation region should have a meaningful purpose. Avoid adding <nav> to every small group of links.

12. Navigation with Headings

A navigation region can have a heading when that makes the structure clearer for users.

<nav aria-label="Main Navigation">

    <a href="/">Home</a>
    <a href="/courses">Courses</a>
    <a href="/contact">Contact</a>

</nav>

13. aria-label with nav

When a page contains multiple navigation regions, an aria-label can be used to provide a descriptive name for a navigation area.

<nav aria-label="Main Navigation">

    <a href="/">Home</a>
    <a href="/courses">Courses</a>
    <a href="/contact">Contact</a>

</nav>

14. Navigation for a Course Website

A training or course website can use navigation to organize its courses.

<nav aria-label="Course Navigation">

    <a href="/html">HTML</a>
    <a href="/css">CSS</a>
    <a href="/javascript">JavaScript</a>
    <a href="/python">Python</a>
    <a href="/dotnet">.NET</a>

</nav>

15. Navigation with Internal Page Links

The <nav> element can also contain links that navigate to different sections of the same page.

<nav>

    <a href="#introduction">
        Introduction
    </a>

    <a href="#forms">
        Forms
    </a>

    <a href="#tables">
        Tables
    </a>

</nav>

<section id="introduction">
    Introduction Content
</section>

<section id="forms">
    Forms Content
</section>

<section id="tables">
    Tables Content
</section>

16. Navigation and Accessibility

Semantic navigation helps assistive technologies understand that a group of links is intended for navigation.

Descriptive labels can be especially useful when a page contains multiple navigation regions.

<nav aria-label="Main Navigation">
    ...
</nav>

<nav aria-label="Course Navigation">
    ...
</nav>

17. Navigation Inside a Sidebar

A sidebar can contain its own navigation area.

<aside>

    <nav aria-label="Tutorial Navigation">

        <a href="/html">HTML</a>
        <a href="/css">CSS</a>
        <a href="/javascript">JavaScript</a>

    </nav>

</aside>

18. Complete Page with nav

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>
        Learning Portal
    </title>

</head>

<body>

    <header>

        <h1>
            Learning Portal
        </h1>

        <nav aria-label="Main Navigation">

            <a href="/">Home</a>
            <a href="/courses">Courses</a>
            <a href="/tutorials">Tutorials</a>
            <a href="/contact">Contact</a>

        </nav>

    </header>

    <main>

        <h2>
            Welcome
        </h2>

        <p>
            Learn web development step by step.
        </p>

    </main>

    <footer>

        <p>
            © 2026 Learning Portal
        </p>

    </footer>

</body>

</html>

19. nav vs div

Element	Purpose
`<nav>`	Represents an important navigation region.
`<div>`	Generic container with no specific semantic meaning.

20. Common Mistakes

Mistake 1: Using nav for every group of links

Not every collection of links needs to be inside a <nav>. Use it for important navigation areas.

Mistake 2: Using buttons for normal page navigation

<button>Go to Courses</button>

When the purpose is to navigate to another page, an anchor is generally more appropriate:

<a href="/courses">
    Go to Courses
</a>

Mistake 3: Missing meaningful link text

<a href="/courses">
    Click Here
</a>

Prefer descriptive link text that communicates where the link goes.

21. Best Practices

Use <nav> for major navigation areas.
Use anchor elements for navigation to URLs or page sections.
Use descriptive link text.
Use aria-label when multiple navigation regions need clear names.
Do not use <nav> for every small group of links.
Keep navigation structure simple and easy to understand.

22. Practice Example

Create a website navigation containing Home, Courses, Tutorials, About, and Contact links.

<nav aria-label="Main Navigation">

    <a href="/">
        Home
    </a>

    <a href="/courses">
        Courses
    </a>

    <a href="/tutorials">
        Tutorials
    </a>

    <a href="/about">
        About
    </a>

    <a href="/contact">
        Contact
    </a>

</nav>

Summary

The HTML <nav> element represents an important navigation area containing links. It is commonly used for website menus, course navigation, documentation navigation, and internal page navigation. Use descriptive links and meaningful labels, especially when a page contains multiple navigation regions.

← Previous: Header Next: Main →