Why there is a <nav> tag in HTML 5?

Question

I am learning HTML 5 and I read that the <nav> tag defines a set of navigation links. I understood the meaning but didn't get any reason that what is the need of these kind of tags like <header> , <footer> and <nav>.

Consider the example here

<nav>
  <a href="">HTML</a>
  <a href="">CSS</a>
  <a href="">JS</a>
</nav>

The output of the above code will be

HTML CSS JS

Consider the another code

<div>
  <a href="">HTML</a>
  <a href="">CSS</a>
  <a href="">JS</a>
</div>

and the output of these code is also

HTML CSS JS

It shows that <nav> tag doesn't add any special meaning to its content then what is the purpose of such kind of tags.

Answer 1

The tag helps arrange the words to be navigated. With the tag, it's easier for the browser to tell that these are to be navigated and it will treat them as such.

Answer 2

I read that the <nav> tag defines a set of navigation links.

The official description of the <nav> element from the w3c specification* is as follows:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

---

I understood the meaning but didn't get any reason that what is the need of these kind of tags like <header>, <footer> and <nav>.

Following the definition, the spec continues with some additional notes, of particular:

Note: User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

---

[My example] shows that tag doesn't add any special meaning to its content then what is the purpose of such kind of tags.

This is a flawed line of thinking. The browser semantics* referred to are not talking about how you read the meaning of an element. Browser semantics are referring to how the browser is expected to interpret a given element.

If you use a <div> element--which is semantically transparent--the browser will completely ignore it when interpreting the document for assistive navigation. It's as though the <div> weren't there at all and the contents were just loose within the <div> element's parent container.

If you use a <nav> element, the browser will note that the node includes contents that are used for navigating around the site or section. If you were using a screen reader, you'd be able to use keyboard controls to quickly toggle through the list of <nav> sections of the page.

_{* a word that means meaning which can be difficult to discuss without devolving into meta-discussions about the nature of semantics and what "means" means.}

Answer 3

From W3 schools:

"Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content."

My shop uses this for web accessibility reasons, for screen readers.

http://www.w3schools.com/tags/tag_nav.asp

Answer 4

The purpose for these tags is more for a Semantic HTML. It strengthens the meaning of the information in webpages/web apps, and not just about the style or presentation.

These tags can be used for a more understandable flow of the webpage for the reader. Which is why when these tags are used, they have different CSS styles applied so that it creates a flow, and let's the reader/user know what is important, or what is not as important.

To answer the question you put in your title, specifically about the <nav> tag, it can be used by screen readers for disabled users. For example, the <nav> tag can be used to determine whether to accept or reject the rendering of specific content. That coming specifically from w3schools.

Answer 5

The special tags are also for search engines. A googlebot can then see where the navigation menu, footer and header starts and ends.