How to use the nav tag for navigation links in HTML5

The <nav> tag in HTML5 is used to define a section of major navigation links, providing semantic structure and improving accessibility and SEO; it should wrap primary navigation elements like menus or tables of contents, not every link on a page, and can be enhanced with ARIA labels such as aria-label="Main navigation" to clarify its purpose for screen readers; multiple <nav> elements are allowed per page for different navigation sections like main menus, article tables of contents, and footer links; and it can be styled using CSS with flexbox or grid for responsive designs, ensuring better user experience across devices.

The <nav></nav> tag in HTML5 is used to define a section of navigation links—like menus, tables of contents, or sets of internal or external links that help users move around a website. It’s a semantic element, meaning it gives structure and meaning to your HTML, making your code more readable for developers and more accessible to screen readers and search engines.

Here’s how to use the <nav></nav> tag effectively:

1. Wrap Navigation Links in <nav></nav>

Use the <nav></nav> element to wrap groups of primary navigation links. This is typically used for major site sections like top menus, sidebars with links, or footer navigation.

<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>

You don’t need to use <nav> for every link on a page—only for blocks of major navigation links. For example, a single "Read more" link in a blog post doesn’t belong in a <nav>.

2. Combine with Semantic and Accessible Markup

To improve accessibility, consider adding ARIA labels or using proper heading structure when needed.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/careers">Careers</a></li>
  </ul>
</nav>

Using aria-label helps screen readers identify the purpose of the navigation block, especially if you have multiple <nav> elements (e.g., main nav, footer nav).

3. Use Multiple <nav> Elements When Needed

A page can have more than one <nav> section. For example:

• One for the main site menu
• One for a table of contents in an article
• One in the footer for secondary links

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<article>
  <nav aria-label="Table of contents">
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
    </ul>
  </nav>
</article>

<footer>
  <nav aria-label="Footer navigation">
    <ul>
      <li><a href="/privacy">Privacy Policy</a></li>
      <li><a href="/terms">Terms of Use</a></li>
    </ul>
  </nav>
</footer>

4. Style with CSS

The <nav> tag can be styled just like any block element. You can use flexbox or grid to create modern navigation layouts.

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}

nav a {
  text-decoration: none;
  color: #007acc;
}

nav a:hover {
  text-decoration: underline;
}

This makes it easy to build responsive navigation menus that work well across devices.

Using the <nav></nav> tag properly improves your site’s structure, accessibility, and SEO. Just remember: use it for significant navigation blocks, not every link. Keep it semantic, label it when helpful, and style it to match your design. That’s the right way to use <nav></nav> in HTML5.

The above is the detailed content of How to use the nav tag for navigation links in HTML5. For more information, please follow other related articles on the PHP Chinese website!