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.