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;