What's the difference between using NAV and DIV around Bootstrap 3 navbars?

Question

In examples for the latest Bootstrap 3 navbars, I found various examples on the web where the outer navbar markup is

<div class="navbar navbar-default navbar-static-top">...</div> 

and other examples are using

<nav class="navbar navbar-default" role="navigation">...</nav> 

All the examples perform OK, and the documentation calls for NAV. Which leaves me wondering if a lot of examples on the web are version 2 leftovers that were not rewritten for version 3, or it is OK to use either surrounding markup.

Example

Answer 1

If you consider "div", it is a block element that contains nothing, it's blank, an empty box ready to be filled with all sorts of html-#X code goodies.

The "Nav" element is much the same, however it is reserved as a block for handling a specific set of html5 code! Hence its reserved for navigation links (in practice of a rule that can be broken). Still, you can do the same in either tag so to speak, its the CSS attributes and classes that controls and manipulates both boxes in most instances.

(in practice of a rule that can be broken) You could even replace all the div's with nav's throughout a web page and it would render the same if the browser supports nav. But it would only serve to confuse the coder, you and others.

While I am unsure if there are any specific directives that regulates, restricts, or represses nav over div, they seem to be much the same tag in all perspectives, an empty box container.

Both nav and div support Global and Event attributes so there are no differences there. BUT! Since both nav and div are a global box (a container), you have a lot of potential possibilities as a mad scientist coder.

Sorry for the weak references but (W3 Schools)

Offers a pretty good insight to the difference in a more layman terms.

In short: nav(html5) was birthed as a complement twin to div in order to ease visual tag coding and make it more recognizable, readable and understandable to developers. BTW: div is not depreciated as a tag in html5/and never will be IMO. span is another!

The old way to create a navigation container/box was -

<div id="navigate"><a href="whatever">link</a></div> or <div id="navigate" class="nav"><a href="whatever">link</a></div> 

and the attributes, css and classes did all the work.

But in the the wonderful world of html 5 the div tag gave birth to the clone nav tag.

<nav> <a href="Home" class="xxx">my anchor/button/list of links with sprinkles</a></nav> 

The nav tag offers a more specific indication (identification) of what it is used for "Navigation". It is simply a matter of the elements being Non-semantic (div) and semantic (nav); and as to copy and plagiarize the w3 schools explanation ....

A semantic element clearly describes its meaning to both the browser and the developer.

nav clearly describes in code that it is a block-tag/container used to hold navigation links (content) with either ul-li's, a/href's, buttons... Nav does not get or post anything as it is simply an empty box container until you put your code and links in it. Even then nav does nothing, its the links that do the work. The attributes associated to the nav tag do the manipulations to the tag eg.."hide or show" it, in its positions.

Div (divide) is "non semantic" as it does not (so much) semantically describe what it is specifically for or does, other than divides areas within the body of the page.

Nav (navigation) does describe itself as being set aside for navigation only so it is considered semantic.

Lastly and of side note in relations, html5 is catching on as the new standard, but it is not (at the time of the original post 2016-17?) supported by all newer browsers as it is yet to be finalized as an official release. IE has yet to include it in their newer release (10 I believe). But its coming!

But because nav> is newer html 5 (only somewhat supported), we still have to rely on the div tag to surround/encase the

<nav>...</nav> 

tag, and its somewhat vital. Thus we must still use

<div> <nav> links 1</nav> </div> 

way into the future for older browsers because the nav tag is not recognized and will be ignored by older browsers, else the contents might just float or push outside the margin box or have other ill side effects. While in newer browsers that do support nav will be safe. Having both div and nav will not harm a ting or change the looks to any noticeable degree.

In short and obviously, we cannot rule out earlier versions of browsers that support lower versions of html(3.x and 4.1) in favor of HTML5, we must consider all browsers and be backwards compatible.

There are many users who cannot use the new browsers that support html5 due to older OS such as windows xp. So keep in mind that there are still many users that are forced to run IE 6,7,8 crap which will not recognize or render the new html5 nav and other tags. That is if you want to reach the all of potential audiences.

I hope this offers a insight more so to the difference as I understand the question and purpose of div and nav.

Answer 2

<nav> is the semantic HTML5 container element for you main navigation elements.

The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other noteworthy groups of links.

from http://learn.shayhowe.com/html-css/elements-semantics

If you are using HTML5 then you should use nav.