Skip to main content

HTML5 Navigation Element (Live Playground)

Introduction​

The <nav> element in HTML5 is a semantic element used to define the navigation section of a page. In this tutorial, you will learn how to use the <nav> element to create accessible and structured navigation menus for your web pages, including common use cases and best practices.

Using the <nav> Element​

The <nav> element is used to group navigation links, which represent the main sections of a website or application. These links should be related and have a common purpose, such as navigating to different parts of a website.

Here's an example of using the <nav> element to create a simple navigation menu:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Navigation Example</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
    </header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    <!-- Page content -->
  </body>
</html>

In this example, the <nav> element contains an unordered list of navigation links.

Live Playground, Try it Yourself

Nesting the <nav> Element​

The <nav> element can be nested within other elements, such as the <header> or <aside> elements, depending on the layout and design of your web page. For example, you can include the <nav> element within the <header> element to create a top navigation menu:

HTML
<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Best Practices​

When using the <nav> element, consider the following best practices:

  1. Use the <nav> element only for the main navigation sections of your website or application. Do not use it for every group of links or for links that are not related to the main navigation.

  2. Avoid using the <nav> element within a <footer> element. Although it is technically allowed, it can create confusion for users and search engines. Instead, use a <div> or <section> element to group footer links.

  3. Use appropriate elements within the <nav> element to denote the type and purpose of the content, such as <ul> for unordered lists, <ol> for ordered lists, and <a> for links.

  4. Consider using ARIA attributes to enhance the accessibility of your navigation menus, such as role="navigation" and aria-label="Main Navigation".

Conclusion​

In this tutorial, you learned how to use the HTML5 <nav> element to create accessible and structured navigation menus for your web pages. By using the <nav> element and following best practices, you can create more organized and accessible web content.

As you continue to develop your web development skills, you'll encounter more advanced techniques for working with semantic elements like the <nav>. For example, you might learn how to use CSS to style your navigation menus or use JavaScript to create dynamic, interactive elements within the navigation, such as drop-down menus or responsive mobile menus.