Creating a Semantic Navigation Bar with the〈nav〉Tag

A navigation or a menu bar is one of the common elements found in a webpage. Mostly developers use a <div> to create a navigation bar container. It works, but it is not semantic way to create a navigation bar.

HTML5 introduced the <nav> tag, which represents a navigation bar in the webpage. Instead of wrapping navigation links inside a <div>, you can use the <nav> element to do this.

<nav>
    <a href="link1.html">Section 1</a>
    <a href="link1.html">Section 2</a>
    <a href="link1.html">Section 3</a>
</nav>

Why Follow Semantic Standards ?

Semantic elements bring a sense of meaning to the page. If navigation links are wrapped inside a normal <div>, only the developer will know that it is actually a menubar. But the browser gets no such idea. To the browser it is a normal container element just like other elements in the page. But that is not true — a navigation bar is special element in the page.

That is why the <nav> tag is useful. Browsers and even common people will get to know that the <nav> element holds navigation links.

Consider the case of GoogleBot that indexes webpages to show in Google search. If the bot finds the <nav> tag, it will understand that is a navigation bar. But if it was contained in a <div>, the bot would have no idea about it.

As far as possible try to include semantic tags in your HTML code.

Other Notes

  • You can include multiple <nav> tags in a page.
  • <nav> is a block level element having the default CSS display: block;