HTML `<nav>` Element: Creating Semantic Navigation Menus

Learn how to use the HTML `<nav>` element to semantically group and structure main navigation links on your website. This tutorial explains its purpose, benefits for accessibility and SEO, and how to style navigation menus using CSS for improved user experience and website organization.

Using the HTML `<nav>` Element for Navigation Links

Understanding the `<nav>` Element

The HTML `<nav>` (navigation) element is a semantic element designed specifically for grouping major navigation links on a webpage. It helps to improve both the structure and accessibility of your HTML code. While the `<nav>` element itself does not directly affect the visual appearance of the links, it adds meaning to the code. This helps screen readers and search engines understand the purpose of the links, making your website easier to use and navigate. It's not intended for *all* links on a page, only the main navigation links.

Using the `<nav>` Element

To create a navigation section, simply place your main navigation links within the opening and closing `<nav>` tags.

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">About</a> |
  <a href="contact.html">Contact</a>
</nav>

Browser Support for `<nav>`

The `<nav>` element is widely supported by all major modern browsers.

Styling the `<nav>` Element with CSS

You can customize the appearance of your navigation using CSS. For example:

nav {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

nav a {
  padding: 10px;
  text-decoration: none;
}

Most browsers render the `<nav>` element as a block-level element by default.