HTML navigation helps users move between different pages or sections of a website. The <nav> element is a semantic HTML element used to group important navigation links, such as Home, About, Tutorials, and Contact.

Navigation menus make websites easier to explore and help users find information quickly. Developers commonly combine HTML navigation with CSS to create horizontal menus, vertical menus, dropdown menus, and responsive mobile navigation.

What Is the HTML Navigation Element?

The HTML <nav> element defines a section containing major navigation links. It is usually placed inside a website header, although it can also appear in other appropriate locations on a webpage.

Here is the basic syntax:

<nav>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/contact/">Contact</a>
</nav>

Each <a> element creates a clickable link, while the href attribute specifies its destination.

HTML Navigation Example

The following example creates a simple navigation menu with HTML and CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Navigation</title>

    <style>
        nav {
            background-color: #0878d1;
            padding: 15px;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
        }

        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
    </header>

    <nav aria-label="Main navigation">
        <a href="/">Home</a>
        <a href="/html/">HTML</a>
        <a href="/css/">CSS</a>
        <a href="/contact/">Contact</a>
    </nav>

    <main>
        <h2>Welcome</h2>
        <p>Explore our web development tutorials.</p>
    </main>

</body>
</html>

In this example, the <nav> element groups the main website links. CSS adds a blue background, white text, and spacing between links. The :hover selector underlines a link when the pointer moves over it.

The aria-label attribute gives assistive technology a descriptive name for the navigation region.

Types of HTML Navigation Menus

Websites can use different navigation styles depending on their design and content.

Navigation Type	Description
Horizontal navigation	Displays links in a row
Vertical navigation	Arranges links in a column
Dropdown navigation	Displays additional links when activated
Breadcrumb navigation	Shows the user’s location within a website
Mobile navigation	Provides a compact menu for smaller screens

CSS controls the appearance of these menus, while JavaScript can add interactive behavior when required.

HTML Navigation Best Practices

Use descriptive link text so users understand where each link leads. Keep the main navigation focused on important pages and use the <nav> element for major navigation sections rather than every group of links.

For mobile-friendly menus, ensure links are easy to tap and the layout adapts to smaller screens. Use meaningful destinations in href attributes instead of placeholder links.

Learn more about HTML headers to understand how navigation menus can be included in a website header.

Frequently Asked Questions

What is the purpose of the HTML <nav> element?

It identifies a section containing major navigation links and helps users and assistive technologies understand the website’s navigation structure.

Can a webpage have multiple <nav> elements?

Yes. A webpage can have separate navigation regions, such as main navigation and breadcrumb navigation. Give each region a descriptive accessible name when needed.

Is the <nav> element enough to create a navigation menu?

The <nav> element provides the structure, but CSS is typically used to style the menu. JavaScript may be needed for interactive features such as a mobile menu toggle.

What is the difference between <nav> and <a>?

The <nav> element groups navigation content, while the <a> element creates an individual hyperlink.