HTML Sectioning Elements Nav Element
Example
The <nav> element is primarily intended to be used for sections that contain main navigation blocks for the website, this can include links to other parts of the web page (e.g. anchors for a table of contents) or other pages entirely.
Inline items
The following will display an inline set of hyperlinks.
<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
</nav>
Use list items when needed
If the content represents a list of items, use a list item to show this and enhance the user experience.
Note the role="navigation", more on this below.
<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
</ul>
</nav>
Avoid unnecessary usage
<footer> elements may have a list of links to other parts of the site (FAQ, T&C, etc.). The footer element alone is sufficient in this case, you don't need to further wrap your links with a <nav> element in the <footer>.
<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>
Notes:
<main>element descendants are not allowed within a<nav>Adding a
role="navigation"ARIA role to the<nav>element is advised to aid user agents that don't support HTML5 and also to provide more context for those that do.<nav role="navigation"><!-- ... --></nav>
Screen Readers: (software that allows blind or visually impaired users to navigate the site)
User agents like screen readers will interpret the
<nav>element differently depending on their requirements.
- It could give the
<nav>element a higher priority when rendering the page- It could delay the rendering of the element
- It could adapt the page in a specific way to tailor for the user's needs
example: make the text links within the<nav>elements larger for someone who's visually impaired.
Click here to read the official HTML5 Specification for the <nav> element
