HTML5 Nav Tag for Navigation | Generated by AI
The correct HTML5 semantic tag for the main navigation area of a page (typically the primary menu with links to the main sections of the website) is <nav>.
Example usage:
<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="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Key points:
- Use
<nav>for major navigation blocks (the primary site navigation). - You do not need to wrap every list of links in
<nav>. For example, footer links, breadcrumb trails, or small secondary link groups usually don’t require the<nav>tag (they can just be<ul>or<div>unless they represent a significant navigation block). - A page can have multiple
<nav>elements if there are multiple major navigation areas (e.g., one in the header and one in the footer), but the primary one is usually the main menu.
Optional accessibility improvement:
You can add aria-label or aria-labelledby to describe the purpose, especially if there are multiple <nav> elements:
<nav aria-label="Main navigation">
<!-- links -->
</nav>
So, in short: <nav> is the proper semantic HTML5 tag for the main navigation area.