HTML <nav> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions(FAQ)

INTRODUCTION

The HTML <nav> element is used is used to define a section of a webpage that contains navigation links. It helps improve the structure and accessibility of a website. It is generally used to create menus, tables of contents, and indexes.

Example:


<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Output:

The concept of the automobile dates back to the 18th century, when inventors experimented with steam-powered vehicles. Some of the key milestones include: 1769 – Nicolas-Joseph Cugnot, a French engineer, built the first self-propelled steam-powered vehicle, primarily used for military purposes.

Usage Guidelines

Not all links need to be placed within a <nav> element. For ex. the <footer> element in general contains link collection, but do not necessarily require a <nav> element.
Multiple <nav> elements can exist on a page (e.g. main menu, sidebar, footer navigation).
The <nav> block generally contains an unordered list (<ul>) of links. With proper CSS it is presented as sidebar, navigation bar, or drop-down menu.
The <nav> element is intended for providing links, but it doesn't have to be limited to a list; it can also include other types of content like headers, paragraphs and others.

Attributes

The <nav> element only includes global attribute.

Tag Omission

The HTML <nav> element must have both start tag and end tag.

Frequently Asked Questions(FAQ)

Is it mandatory to use the <nav> element for all navigation links?

No, not all groups of links need to be enclosed within a <nav> element. It's specifically intended for major navigation blocks. For instance, a footer containing a few links doesn't necessarily require a <nav> element.

Can the <nav> element contain elements other than lists?

Yes, while it's common to use unordered (<ul>) or ordered (<ol>) lists within a <nav> element, it can also contain other elements like paragraphs or divs that include navigation links.

Can multiple <nav> elements be used within a single HTML document?

Yes, multiple <nav> elements can be used in a single document, especially when there are distinct navigation sections, such as primary navigation, secondary navigation, or in-page navigation.

What is the difference between <nav> and <menu> in HTML?

The <nav> element is specifically for major navigation links, while the <menu> element was originally intended for context menus and lists of commands. However, <menu> is less commonly used and not as widely supported.

Should a <nav> element be outside the <main> element?

Yes, the <nav> element should typically be placed outside the <main> element because navigation is not part of the main content but rather a supporting structure for the page.

Should we put <ul> tag inside <nav> tag?

Yes, it is a common best practice to place a <ul> (unordered list) inside a <nav> tag when structuring navigation menus. This helps organize links in a semantic, accessible, and SEO-friendly way.


<nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</nav>