HTML nav: Main Tips
- By using HTML
navtag, 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
navtags can be used in any section of a website.
Using nav in 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
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.
Theory is great, but we recommend digging deeper!
Mostly Used <nav> Attributes
nav tag has no specific attributes but supports all the global ones.
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>