Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

HTML nav Tag

Reading time 2 min
Published Jun 29, 2017
Updated Oct 2, 2019

HTML nav: Main Tips

  • By using HTML nav tag, you can put a group of links in a single semantic element, making your website more organized.
  • This element is useful for users navigating the main sections of a website.
  • Tables of contents and menus are good examples of HTML nav elements.
  • HTML nav tags can be used in any section of a website.

Using nav in HTML

HTML nav element defines a block of navigational links leading to the main sections of a website:

Example
<nav>
  <ul>
    <li><a href="https://www.bitdegree.org/tag/interactive-learning">Gamified Courses</a></li>
    <li><a href="https://www.bitdegree.org/tutorials">Tutorials</a></li>
    <li><a href="https://www.bitdegree.org/course/learn-solidity-space-doggos">Space doggo course</a></li>
    <li><a href="https://www.bitdegree.org/tag/game-dev">Game Dev Courses</a></li>
  </ul>
</nav>

You should only use the <nav> tag for the dominant block of navigational links, not all the links within a website. It is a great option when you need to include an unordered or ordered list of links. However, if you want to add links to the <footer> element, you don't need to include <nav> tags.

Note: HTML nav element also serves as a navigation landmark for the page. It is useful when addressing accessibility issues: screen readers can use it to allow keyboard navigation to page sections.

Mostly Used <nav> Attributes

HTML nav tag has no specific attributes but supports all the global ones. accesskey, dir, id, and translate are the ones used most often.

accesskey defines a shortcut key to activate or focus an element:

Example
<nav>
 <a href="#main" accesskey="d">First sample</a>
 <a href="#nav" accesskey="h">Second sample</a>
</nav>

dir sets the text direction for the content:

Example
<nav dir="rtl">
  <a href="https://www.bitdegree.org">Home</a>
</nav>

id sets a unique ID for an HTML element:

Example
<nav id="faq">
 <a href="https://www.bitdegree.org/faq">Your questions answered</a>
</nav>

translate identifies whether the content of the element needs to be translated:

Example
<nav translate="lt">
 <a href="https://www.bitdegree.org/courses">Learn With Us!</a>
</nav>

Browser support

Browser image
Chrome
5+
Browser image
Edge
All
Browser image
Firefox
4+
Browser image
IE
9+
Browser image
Opera
11.1+
Browser image
Safari
4.1+

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
11.1+
Browser image
Safari
4.2+