How to use the nav semantic element - HTML 5

In this post, we will see the main concepts and ways of using the semantic element nav and also how not to use it.

How to use the semantic element nav?

The nav element serves as a section that contains links or anchors.

Links pointing to other pages on the site and anchors pointing to other regions of the site.

That famous function of scrolling the browser bar to a certain section.

Important considerations:

Not all links on a site must be in a nav element, just use the important ones in it;
A page can have several nav elements, one for links and one for redirects on the page itself, for example;

Be careful when constructing your HTML with the above points as Google can penalize poorly written code.

However, a semantic and well-written code can earn you better positions on Google, as it increases your SEO score.

Using nav in practice

The classic use of nav is for the element that contains the main links of the site and at the top of it.

See this HTML example:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">My Account</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Here we create a navigation bar for e-commerce, for example.

We make explicit the links to the homepage, products, company history, user account, and contact.

So in a virtual store environment, these links can be considered the most important.

However, as we have other links that users may want to access such as Privacy Policy or Exchange Policy.

We can add another nav in the footer of our site with these other more ‘general’ links.

So once again we correctly use the nav tag.

And even on a product page, we can have an anchor menu, which aims to lead the user to certain product features, but on the same page.

For example raw materials and consumer evaluation.

These are important topics and appear on the same product page, and perhaps because of their extension, they are not displayed in an intuitive way to the user.

So the anchor menu with the nav tag could be used in this case, cool right? 😀

Conclusion

We saw then that the semantic element nav can be used for both links and redirects on the page itself.

Not all links need to be on nav, you should choose the most important ones.

Furthermore, the nav tag is usually used to represent the main navigation bar of a website.

And that’s it for today, until the next post!