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.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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

Chrome

5+

Edge

All

Firefox

4+

IE

9+

Opera

11.1+

Safari

4.1+

Mobile browser support

Chrome

All

Firefox

4+

Opera

11.1+

Safari

4.2+