HTML Navigation: The <nav> Tag Explained

HTML <nav> Tag

The <nav> tag in HTML is a semantic element that represents a section of a page dedicated to navigation links. It's intended to contain major navigational blocks such as primary navigation menus, table of contents, and breadcrumbs. Using the <nav> tag enhances the accessibility and SEO of your website, signaling to both browsers and screen readers that this section contains navigation elements.

Syntax

<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <!-- Other navigation links -->
</nav>

Attributes

The <nav> tag supports the Global Attributes and Event Attributes in HTML.
| Attribute | Value | Description |
|———–|——–|————-|
| class | class names | Specifies one or more class names for the <nav> element (used for styling with CSS or for Javascript) |
| id | id value | Specifies a unique id for the <nav> element |
| style | CSS styles | Specifies inline CSS styles for the <nav> element |
| title | text | Specifies extra information about the element |
| data-* | any value | Used to store custom data private to the page or application |

Example

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

More Examples

Example 1: Main Navigation Menu

This example demonstrates a typical main navigation menu, often found in the header of a website. It uses an unordered list (<ul>) and list items (<li>) to structure the navigation links.

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Example 2: Breadcrumb Navigation

This shows how to use the <nav> tag for breadcrumb navigation, indicating the user's location within the site.

<nav aria-label="breadcrumb">
    <a href="/">Home</a> /
    <a href="/category">Category</a> /
    <span>Current Page</span>
</nav>

Example 3: Sidebar Navigation

Here, <nav> is used within a sidebar to house navigation links pertinent to the page's content.

<aside>
    <nav>
      <h3>Related Articles</h3>
      <ul>
        <li><a href="/article1">Article 1</a></li>
        <li><a href="/article2">Article 2</a></li>
        <li><a href="/article3">Article 3</a></li>
      </ul>
    </nav>
</aside>

Example 4: Footer Navigation

Navigation in the footer is a common practice, and using the <nav> tag here helps to improve the document structure.

<footer>
  <nav>
    <a href="/terms">Terms of Use</a> |
    <a href="/privacy">Privacy Policy</a> |
    <a href="/sitemap">Sitemap</a>
   </nav>
   <p>© 2024 CodeLucky</p>
</footer>

Browser Support

The <nav> tag is supported by all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Semantic Importance: Always use the <nav> tag to represent a section that contains navigation links. This improves SEO and accessibility.
• Multiple <nav> Tags: It’s acceptable to have multiple <nav> tags on a page, for example, one in the header for the main navigation, and another in the sidebar for secondary navigation. Just be sure that each one serves a distinct navigation purpose.
• Not All Links Require <nav>: The <nav> tag should be used for major navigation blocks only. A simple set of links within a paragraph does not need to be enclosed in a <nav> tag.
• Accessibility: Consider providing an aria-label or a role attribute for the <nav> tag to enhance the experience for users with assistive technologies. For instance, use aria-label="main navigation" for the primary navigation or role="navigation" as a fallback.
• Structure: Typically, the <nav> tag contains an unordered list (<ul>) and list items (<li>) with anchor (<a>) tags, but other structures are also valid as needed.
• Styling: You can style the <nav> tag using CSS just like any other HTML element, creating the menu style you desire.