HTML nav Tag

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:

<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:

<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:

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

id sets a unique ID for an HTML element:

<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:

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

Browser support

Mobile browser support