<nav>

Defines a menu for navigating an HTML page.
2 min read
Believemy logo

The <nav> tag is used in HTML to define a navigation section in a document.

Good to know

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:

HTML
<nav>
  Navigation content here
</nav>

 

Usage example

Here is a typical example of navigation:

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

Warning

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.

BrowserCompatibility
ChromeYes
FirefoxYes
SafariYes
EdgeYes
Internet ExplorerYes

Related terms

Discover our hTML and CSS glossary

Browse the terms and definitions most commonly used in HTML and CSS development.

Share this article

Want to help us? Share this article on your networks or even better: on your site, in an article or in your newsletter.