The
<nav>tag defines a section of a webpage that contains navigation links.
It helps users move around a website and assists search engines in understanding the site’s structure.
Commonly used for main menus, sidebars, and internal page navigation.
Syntax
<nav>
<!-- Navigation links -->
</nav>Attributes
| Attribute | Description |
|---|---|
| Global Attributes | The <nav> element supports all global attributes like id, class, style, etc. |
| Event Attributes | Also supports event attributes such as onclick, onmouseover, etc. |
Example
<!DOCTYPE html>
<html>
<head>
<title>Navigation Example</title>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</body>
</html>Output
Browser Output
Use our TryIt editor to see the output
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser support this <nav> tag
Notes
- The
<nav>element should only include major navigation blocks. - Don’t wrap every set of links inside
<nav>. - Typically used in headers, sidebars, or footers for key navigation.
- Helps improve accessibility and SEO by indicating navigation landmarks.
Conclusion
The <nav> tag is essential for building structured and accessible websites.
It clearly defines navigational menus, improves SEO and usability, and enhances readability for both users and assistive technologies.
Always use <nav> to wrap major navigation links, and style it consistently for a cohesive user experience.
