HTML Nav Tag: How to Create Navigation Menus

The nav tag defines a navigation block in HTML. It holds main links to other parts of your site. Search engines detect it as primary navigation.

The <nav> tag used for menus and key link groups only. HTML5 introduced it to add clear structure.

Basic Syntax of HTML <nav> Tag

The syntax looks like this:

<nav>
  <!-- Your links here -->
</nav>

You must start with <nav> and end with </nav>. Place <a> elements inside the container. Wrap them in <ul> and <li> tags to build menus. Take this example:

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

This structure avoids markup errors.

Use <nav> for main site navigation. Place it around key internal links. Text-to-speech tools use it to jump to links, while search engines see it as your site map.

Never wrap the footer or unrelated links in <nav>. You can use more than one <nav> if your site has separate sections.

Here are the important points when you use the nav tag in HTML:

• Add an aria-label if you have more than one <nav>. This describes the purpose of each navigation area and uses link text.
• Place headings near <nav> to give context.
• Add skip links to jump past navigation.
• Test the <nav> with a screen reader to confirm it works.

Styles of HTML <nav> Tag with CSS

The <nav> tag has no built-in style, and you need to add CSS to create a layout. Use Flexbox or Grid for alignment.

Here’s how to center links in a horizontal bar:

nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

nav li {
  margin-right: 20px;
}

You can highlight the active link with a class. Make sure your styles adapt to all screen sizes.

Examples of HTML <nav> Tag

Simple Site Navigation:

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

This example shows a basic navigation bar with links to main pages.

Navigation with List Items:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/services">Services</a></li>
  </ul>
</nav>

This structure uses lists to organize links.

Navigation with Logo:

<nav>
  <a href="/"><img src="logo.png" alt="Site Logo"></a>
  <a href="/products">Products</a>
  <a href="/cart">Cart</a>
</nav>

The logo acts as a link to the homepage. It combines brand and navigation in one clear section.

Nested Navigation for Sections:

<nav>
  <a href="/">Home</a>
  <div>
    <a href="/products">Products</a>
    <a href="/products/new">New Arrivals</a>
  </div>
</nav>

This shows nested links under a main section. It organizes related pages clearly so users see their options.

Navigation with ARIA Label:

<nav aria-label="Main Navigation">
  <a href="/">Home</a>
  <a href="/profile">Profile</a>
  <a href="/settings">Settings</a>
</nav>

This example uses an ARIA label to help text-to-speech tools. It makes the navigation clear and improves usability for everyone.

Wrapping Up

In this article you learned what the <nav> tag does and how it marks your main site navigation. You also saw how to use syntax and structure.

Here is a quick recap:

• The <nav> tag is the key to site links and defines the main navigation.
• It signals primary navigation to search engines for better SEO.
• Use clear internal links and avoid unrelated or footer links inside <nav>.
• Add CSS to style and arrange links in a responsive layout.
• Include ARIA labels if you use more than one
  to help text-to-speech tools
• Test your navigation on different devices and with screen readers to ensure access for everyone.

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

Similar Reads