What's The Difference Between Using Nav And Div Around Bootstrap 3 Navbars?
Solution 1:
<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.
Solution 2:
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><ahref="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.
Solution 3:
There is absolutely no difference to the browser between a div and a nav tag. The only difference is to the human reader of the HTML. Using a nav tag that encloses navigation elements is the same as using a div tag to enclose navigation elements and adding an HTML comment that informs the human reader of the HTML that the div tag contains only navigation elements.
Solution 4:
There is no difference between and . DIV is original HTML tag while NAV was introduced as part of new HTML5 semantic tags. They behave exactly the same. Supports all global attributes and events [w3 link]. The only main purpose is, it introduces semantics to HTML, that is the tag itself says what it should contain, rather than DIV which is without any meaning.
Other purpose is the idea of Affordance, that is a an object tell you just by its property what is used for or how it should be used. For example, you automatically know how to use teapot (it has a handle and a spout), no one needs to teach you about it. Semantics provide affordance. You can think of semantics as same as affordances (affordances are lets say visual, semantics are lets say in coding). More on this excellent youtube link
Third reason for this tag is provide accessibility features for visual impaired people. It is part of WAI-ARIA set of features which are design to improve nagivation including for visualy or otherwise impaired people. So lets say a user interacts with the application through screen reader or otherwise, that application make uses of these HTML5 semantic tags (, , etc) and can pronounce these. Other ways that HTML5 allows semantics is by assigning role="" property provides semantics to a div or an HTML element for example.
Post a Comment for "What's The Difference Between Using Nav And Div Around Bootstrap 3 Navbars?"