Nav Element

suggest change

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.

    <a href="">Google</a>
    <a href="">Yahoo!</a>
    <a href="">Bing</a>

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">
        <li><a href="">Google</a></li>
        <li><a href="">Yahoo!</a></li>
        <li><a href="">Bing</a></li>

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> -->
        <a href="#">...</a>

<!-- The footer alone is sufficient -->
    <a href="#">...</a>


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.

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

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents