HTML Sectioning Elements Nav Element

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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:

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



Got any HTML Question?