How to Use the Nav Element in HTML

Introduction

The <nav> element is used to identify a section of a page that contains important navigation links.

Navigation links help users move around a website or page. They may link to the homepage, about page, services page, contact page, product categories, article sections, or other important destinations.

For example:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”services.html”>Services</a>5  <a href=”contact.html”>Contact</a>6</nav>

This tells the browser that these links form a navigation area.

The <nav> element is a semantic HTML element. That means it gives meaning to the content inside it. It does not just create a visual box. It tells browsers, search engines, assistive technologies, and developers that this group of links is used for navigation.

What Is the <nav> Element?

The <nav> element represents a section of navigation links.

The name nav is short for “navigation”.

A simple example looks like this:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</nav>

Each <a> element creates a hyperlink.

The <nav> element groups those links together and describes their purpose.

Without <nav>, the browser can still display the links. However, the page structure is less meaningful.

Less meaningful:

1<div>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</div>

More meaningful:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</nav>

The second version clearly says, “This is navigation.”

When Should You Use <nav>?

Use <nav> for important groups of links that help users navigate.

Common examples include:

1main site navigation2footer navigation3sidebar navigation4section navigation5breadcrumb navigation6table of contents links7category links

For example, a main menu is a good use of <nav>:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”services.html”>Services</a>4  <a href=”portfolio.html”>Portfolio</a>5  <a href=”contact.html”>Contact</a>6</nav>

These links help users move between major pages of the website.

Not Every Link Needs <nav>

A common mistake is putting every link inside a <nav> element.

That is not necessary.

For example, a link inside a paragraph does not usually need <nav>:

1<p>2  You can learn more on our3  <a href=”services.html”>services page</a>.4</p>

This is just a normal link in the content.

It does not need to be wrapped in <nav> because it is not part of a navigation menu or major group of navigation links.

Use <nav> when the group of links is an important navigation section.

A Basic Navigation Menu

Here is a simple navigation menu:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”services.html”>Services</a>5  <a href=”contact.html”>Contact</a>6</nav>

This creates four links.

The href attribute tells the browser where each link should go.

For example:

1<a href=”about.html”>About</a>

This creates a link to the about.html file.

The text between the opening and closing <a> tags is the visible link text:

1About

Using <nav> Inside a Header

A navigation menu is often placed inside a page header.

For example:

1<header>2  <h1>Bright Web Studio</h1>3 4  <nav>5    <a href=”index.html”>Home</a>6    <a href=”services.html”>Services</a>7    <a href=”portfolio.html”>Portfolio</a>8    <a href=”contact.html”>Contact</a>9  </nav>10</header>

The <header> contains introductory site content.

The <nav> contains the main navigation links.

This is a common structure for the top area of a website.

Using a List Inside <nav>

Navigation menus are often written as lists because a menu is usually a list of links.

For example:

1<nav>2  <ul>3    <li><a href=”index.html”>Home</a></li>4    <li><a href=”about.html”>About</a></li>5    <li><a href=”services.html”>Services</a></li>6    <li><a href=”contact.html”>Contact</a></li>7  </ul>8</nav>

This structure uses:

1<nav>

to identify the navigation area,

1<ul>

to create an unordered list,

1<li>

to create each list item,

and:

1<a>

to create each link.

This is a strong structure because it shows that the links are grouped as a menu.

Should Navigation Links Use a List?

You do not always have to use a list inside <nav>.

This is valid:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</nav>

This is also valid:

1<nav>2  <ul>3    <li><a href=”index.html”>Home</a></li>4    <li><a href=”about.html”>About</a></li>5    <li><a href=”contact.html”>Contact</a></li>6  </ul>7</nav>

For simple examples, direct links inside <nav> are easy to understand.

For larger menus, lists are often clearer because the navigation is a group of related items.

Main Navigation

The main navigation usually contains the most important links on a website.

For example:

1<header>2  <a href=”index.html”>3    <img src=”images/logo.png” alt=”Bright Web Studio homepage”>4  </a>5 6  <nav>7    <ul>8      <li><a href=”index.html”>Home</a></li>9      <li><a href=”services.html”>Services</a></li>10      <li><a href=”work.html”>Our Work</a></li>11      <li><a href=”contact.html”>Contact</a></li>12    </ul>13  </nav>14</header>

This header includes a linked logo and a navigation menu.

Clicking the logo goes to the homepage.

The navigation links go to important pages.

Footer Navigation

A page can have more than one <nav> element.

For example, a website may have main navigation at the top and footer navigation at the bottom.

1<footer>2  <nav>3    <a href=”privacy.html”>Privacy Policy</a>4    <a href=”terms.html”>Terms</a>5    <a href=”accessibility.html”>Accessibility</a>6  </nav>7</footer>

This navigation helps users find important support, legal, or informational pages.

It is still navigation, even though it appears in the footer.

Sidebar Navigation

A sidebar can also contain navigation.

For example:

1<aside>2  <nav>3    <h2>HTML Tutorials</h2>4 5    <ul>6      <li><a href=”html-introduction.html”>Introduction to HTML</a></li>7      <li><a href=”html-links.html”>HTML Links</a></li>8      <li><a href=”html-images.html”>HTML Images</a></li>9      <li><a href=”html-forms.html”>HTML Forms</a></li>10    </ul>11  </nav>12</aside>

This could be used on a tutorial website to help users move between related lessons.

The <aside> contains related content.

The <nav> identifies the links as navigation.

Page Section Navigation

Sometimes navigation links point to sections on the same page.

For example:

1<nav>2  <a href=”#introduction”>Introduction</a>3  <a href=”#examples”>Examples</a>4  <a href=”#summary”>Summary</a>5</nav>6 7<section id=”introduction”>8  <h2>Introduction</h2>9  <p>This section introduces the topic.</p>10</section>11 12<section id=”examples”>13  <h2>Examples</h2>14  <p>This section contains examples.</p>15</section>16 17<section id=”summary”>18  <h2>Summary</h2>19  <p>This section summarises the topic.</p>20</section>

The href="#introduction" link points to the element with:

1id=”introduction”

This kind of navigation is often used for long articles, documentation pages, and tables of contents.

Breadcrumb Navigation

Breadcrumbs show where a page sits within a website structure.

For example:

1<nav aria-label=”Breadcrumb”>2  <a href=”index.html”>Home</a>3  <span>›</span>4  <a href=”tutorials.html”>Tutorials</a>5  <span>›</span>6  <span>HTML Navigation</span>7</nav>

This shows a path from the homepage to the current page.

The aria-label="Breadcrumb" attribute gives the navigation area a clear accessible label.

This is useful when a page has more than one navigation area.

Labelling Multiple Navigation Areas

A page can have more than one <nav> element.

For example, it might have:

1main navigation2footer navigation3breadcrumb navigation4sidebar navigation

When there are several navigation areas, it can be helpful to label them.

For example:

1<nav aria-label=”Main navigation”>2  <a href=”index.html”>Home</a>3  <a href=”services.html”>Services</a>4  <a href=”contact.html”>Contact</a>5</nav>6 7<nav aria-label=”Footer navigation”>8  <a href=”privacy.html”>Privacy Policy</a>9  <a href=”terms.html”>Terms</a>10</nav>

The aria-label helps assistive technologies distinguish between navigation areas.

For a simple page with one navigation menu, you may not need this. For more complex pages, labels can make the structure clearer.

Navigation and Accessibility

The <nav> element can help accessibility because it identifies a navigation region.

Assistive technologies may allow users to jump between page regions, including navigation areas.

This can make it easier to move around a page without reading every line from top to bottom.

Clear link text also matters.

Good:

1<a href=”services.html”>View our services</a>

Less helpful:

1<a href=”services.html”>Click here</a>

Navigation links should usually be short, clear, and predictable.

For example:

1<a href=”about.html”>About</a>2<a href=”contact.html”>Contact</a>

These are simple and understandable.

Styling Navigation with CSS

The <nav> element gives meaning to the HTML.

CSS controls how the navigation looks.

For example:

1<nav class=”main-nav”>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”services.html”>Services</a>5  <a href=”contact.html”>Contact</a>6</nav>

You could style it like this:

1.main-nav {2  display: flex;3  gap: 20px;4}5 6.main-nav a {7  text-decoration: none;8}

This can display the links in a row and remove the default underline.

The HTML provides structure and meaning.

The CSS controls spacing, layout, colour, typography, and appearance.

Styling a List-Based Navigation Menu

If your navigation uses a list, you may want to remove the default bullet points.

For example:

1<nav class=”main-nav”>2  <ul>3    <li><a href=”index.html”>Home</a></li>4    <li><a href=”about.html”>About</a></li>5    <li><a href=”services.html”>Services</a></li>6    <li><a href=”contact.html”>Contact</a></li>7  </ul>8</nav>

CSS:

1.main-nav ul {2  list-style: none;3  padding: 0;4  margin: 0;5  display: flex;6  gap: 20px;7}8 9.main-nav a {10  text-decoration: none;11}

The list structure remains meaningful, but the browser no longer displays bullet points.

A Complete Example

Here is a simple page using the <nav> element:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Navigation Example</title>6</head>7<body>8 9  <header>10    <h1>Bright Web Studio</h1>11 12    <nav aria-label=”Main navigation”>13      <ul>14        <li><a href=”index.html”>Home</a></li>15        <li><a href=”services.html”>Services</a></li>16        <li><a href=”portfolio.html”>Portfolio</a></li>17        <li><a href=”contact.html”>Contact</a></li>18      </ul>19    </nav>20  </header>21 22  <main>23    <h2>Welcome</h2>24    <p>We create simple websites for small businesses.</p>25  </main>26 27  <footer>28    <nav aria-label=”Footer navigation”>29      <a href=”privacy.html”>Privacy Policy</a>30      <a href=”terms.html”>Terms</a>31    </nav>32  </footer>33 34</body>35</html>

This example has two navigation areas.

The first <nav> is the main navigation.

The second <nav> is the footer navigation.

The aria-label attributes help identify each navigation area more clearly.

Common Mistake: Using <nav> for Every Link

Not every link belongs inside <nav>.

This does not need <nav>:

1<p>2  Read our <a href=”privacy.html”>privacy policy</a> for more information.3</p>

This is just a normal link inside a paragraph.

Use <nav> for groups of links that help users navigate around the site or page.

Common Mistake: Using <div> When <nav> Is More Meaningful

This works visually:

1<div class=”menu”>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</div>

But this is more meaningful:

1<nav class=”menu”>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</nav>

If the content is a navigation menu, use <nav>.

Common Mistake: Unclear Link Text

Navigation links should be easy to understand.

Weak:

1<a href=”services.html”>Click here</a>

Better:

1<a href=”services.html”>Services</a>

The second version tells users where the link goes.

This is especially important for screen reader users, keyboard users, and anyone scanning the page quickly.

Common Mistake: Too Many Links in the Main Navigation

A main navigation menu should usually focus on the most important destinations.

If you add too many links, the menu becomes harder to scan.

For example, this may be too much for a simple site:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”team.html”>Team</a>5  <a href=”history.html”>History</a>6  <a href=”services.html”>Services</a>7  <a href=”pricing.html”>Pricing</a>8  <a href=”blog.html”>Blog</a>9  <a href=”news.html”>News</a>10  <a href=”careers.html”>Careers</a>11  <a href=”contact.html”>Contact</a>12</nav>

A simpler version may be easier to use:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”services.html”>Services</a>5  <a href=”contact.html”>Contact</a>6</nav>

More links can still appear in dropdowns, sidebars, footers, or dedicated index pages if needed.

Common Mistake: Forgetting That Navigation Needs Links

The <nav> element should contain navigation links.

This is not useful:

1<nav>2  <p>Welcome to our website.</p>3</nav>

A better use is:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4</nav>

If the content does not help users navigate, it probably does not belong inside <nav>.

Best Practices

Use <nav> for important groups of navigation links.

Use clear link text.

Use <nav> for main menus, footer menus, sidebars, breadcrumbs, and tables of contents.

Do not put every link on the page inside <nav>.

Use a list inside <nav> when the navigation is naturally a list of links.

Use aria-label when a page has multiple navigation areas.

Place main navigation near the top of the page, often inside <header>.

Use CSS to control the appearance of navigation menus.

Keep main navigation focused on important links.

Use <a> elements for navigation links.

Summary

The <nav> element identifies a navigation section on a web page.

A simple example looks like this:

1<nav>2  <a href=”index.html”>Home</a>3  <a href=”about.html”>About</a>4  <a href=”contact.html”>Contact</a>5</nav>

Use <nav> for important groups of links, such as main menus, footer links, sidebar menus, breadcrumbs, or tables of contents.

Do not use <nav> for every individual link.

The <nav> element gives meaning to the page structure. It helps browsers, assistive technologies, search engines, and developers understand that a group of links is used for navigation.

Used well, <nav> makes your HTML clearer, more accessible, and easier to maintain.