Html 在 Bootstrap 3 导航栏周围使用 NAV 和 DIV 有什么区别？

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

提问by user1695595

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

在最新的 Bootstrap 3 导航栏的示例中，我在网上找到了各种示例，其中外部导航栏标记是

<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.

所有示例都执行正常，文档要求 NAV。这让我想知道网络上的很多示例是否都是版本 2 的剩余部分，没有为版本 3 重写，或者可以使用任何一个周围的标记。

Example

例子

回答by Banford

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

<nav>是主要导航元素的语义 HTML5 容器元素。

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

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

If you are using HTML5 then you should use nav.

如果您使用的是 HTML5，那么您应该使用导航。

回答by BobDCoder

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

如果您考虑“ div”，它是一个不包含任何内容的块元素，它是空白的，是一个准备好填充各种 html- #X代码好东西的空框。

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.

“ Nav”元素大致相同，但它被保留为处理一组特定 html5 代码的块！因此，它保留用于导航链接（实际上是可以破坏的规则）。尽管如此，您可以在任何一个标签中做同样的事情，它的 CSS 属性和类在大多数情况下控制和操作这两个框。

(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.

（在实践中可以打破规则）您甚至可以在整个网页中将所有 div 替换为导航，如果浏览器支持导航，它将呈现相同的效果。但这只会混淆编码员、您和其他人。

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.

虽然我不确定是否有任何特定的指令来规范、限制或抑制 div 上的导航，但它们似乎在所有方面都是相同的标签，一个空的盒子容器。

Both navand divsupport Globaland Event attributesso 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.

这两种导航和DIV支持全球和事件属性，所以有没有没有区别。但！由于 nav 和 div 都是一个全局框（一个容器），作为一个疯狂的科学家编码器，你有很多潜在的可能性。

Sorry for the weak references but (W3 Schools)

抱歉，参考资料较弱，但（W3 学校）

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

以更外行的方式提供了对差异的很好的洞察力。

In short: nav(html5)was birthed as a complement twinto divin 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. spanis another!

简而言之：NAV（HTML5）被作为生产经历的一个补充双胞胎来格，以缓解视觉标签的编码，使之更容易识别，易于阅读和理解给开发者。顺便说一句：div 不会作为 html5 中的标签折旧/永远不会是 IMO。跨度是另一个！

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.

属性、CSS 和类完成了所有工作。

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

但是在 html 5 的美妙世界中，div 标签催生了克隆导航标签。

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

The navtag 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 ....

该导航标签提供的它是干什么用的“更具体的指示（标识）导航”。这只是非语义 (div)和语义 (nav)元素的问题；以及复制和抄袭w3学校的解释......

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

语义元素向浏览器和开发人员清楚地描述了其含义。

navclearly 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 containeruntil 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.

nav在代码中清楚地描述了它是一个块标签/容器，用于保存带有 ul-li、a/href、按钮的导航链接（内容）...... Nav 不会获取或发布任何内容，因为它只是一个空框容器，直到您将代码和链接放入其中。即使这样 nav 什么都不做，它的链接完成了工作。与导航标签相关联的属性对标签进行操作，例如在其位置“隐藏或显示”它。

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.

Div（divide）是“非语义的”，因为它没有（太多）语义上描述它专门用于或做什么，除了在页面主体内划分区域。

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

Nav（导航）确实将自己描述为仅用于导航，因此它被认为是语义的。

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!

最后，在关系中的旁注是，html5 正在成为新标准，但所有较新的浏览器都不支持（在 2016-17 的原始帖子时？），因为它尚未最终确定为正式版本. IE 尚未将其包含在其较新版本中（我相信有 10 个）。但它来了！

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

但是因为 nav> 是较新的 html 5（仅在某种程度上支持），我们仍然必须依靠 div 标签来包围/包裹

<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.

旧浏览器的未来之路，因为导航标签无法识别并且会被旧浏览器忽略，否则内容可能只是浮动或推到边距框之外或有其他不良副作用。而在支持导航的较新浏览器中是安全的。同时拥有 div 和 nav 不会损害 ting 或将外观改变到任何明显的程度。

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.

简而言之，显然，我们不能排除支持低版本 html（3.x 和 4.1）而支持 HTML5 的早期浏览器版本，我们必须考虑所有浏览器并向下兼容。

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.

由于windows xp等旧操作系统，很多用户无法使用支持html5的新浏览器。所以请记住，仍有许多用户被迫运行 IE 6、7、8 垃圾，它们无法识别或呈现新的 html5 导航和其他标签。也就是说，如果您想覆盖所有潜在受众。

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

我希望这能在我理解 div 和 nav 的问题和目的时更深入地了解差异。

回答by Hammad Khan

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.

和 之间没有区别。DIV 是原始的 HTML 标签，而 NAV 是作为新的 HTML5 语义标签的一部分引入的。他们的行为完全一样。支持所有全局属性和事件[w3 链接]。唯一的主要目的是，它为 HTML 引入了语义，即标签本身说明了它应该包含的内容，而不是没有任何意义的 DIV。

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

另一个目的是 Affordance 的概念，即一个对象仅通过其属性告诉您它的用途或应该如何使用。例如，你会自动知道如何使用茶壶（它有一个把手和一个壶嘴），没有人需要教你。语义提供可供性。您可以将语义与可供性视为相同（可供性是视觉，语义是编码）。关于这个优秀的 youtube 链接的更多信息

Third reason for this tag is provide accessibility features for visual impaired people. It is part of WAI-ARIAset 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.

此标签的第三个原因是为视障人士提供辅助功能。它是WAI-ARIA功能集的一部分，旨在改善导航，包括视觉或其他方面有障碍的人。因此，假设用户通过屏幕阅读器或其他方式与应用程序交互，该应用程序使用这些 HTML5 语义标签（、 等）并可以发音。HTML5 允许语义的其他方式是通过分配 role="" 属性为 div 或 HTML 元素提供语义。