The <nav> tag is used in HTML to define a navigation section in a document.
It is generally used to group navigation links that allow users to easily move around a website.
Structure and syntax of the <nav> tag
Basic structure and syntax
Here is the basic syntax of a <nav> tag:
<nav>
Navigation content here
</nav>
Usage example
Here is a typical example of navigation:
<nav>
<ul>
<li><a href="#home">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>In this example, the <nav> tag is used to group navigation links in an unordered list.
Attributes
The <nav> tag accepts classic HTML attributes such as:
class: to apply CSS styles.id: to identify a unique container.style: to apply inline styles.
Best practices
Use the <nav> tag to organize and structure the navigation elements on your website. This improves accessibility by providing search engines and screen readers with a way to quickly locate the navigation.
Avoid using <nav> for non-essential or repetitive navigation elements. For example, do not use it for navigation links in non-main sections like footers or internal menus such as user profile tabs.
Difference with other similar tags
<header>: The<header>tag is used to define the header of a document, which can include elements like the logo and the site title, whereas<nav>is specifically intended for navigation links.<footer>: The<footer>tag is used for the footer, generally for legal and contact information, while<nav>is dedicated to the site's navigation.
Browser compatibility
The <nav> tag is supported by all modern browsers.
| Browser | Compatibility |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Internet Explorer | Yes |