twitter-bootstrap Bootstrap 和 HTML5 语义标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22133639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap and HTML5 Semantic tags
提问by Jatin
I am getting started with Twitter Bootstrap and came across a question.
我开始使用 Twitter Bootstrap 并遇到了一个问题。
Recently went through some tutorials regarding HTML5 and found out about semantic elements such as header, nav, footer, etc should be used instead of Div.
最近浏览了一些关于 HTML5 的教程，发现应该使用诸如页眉、导航、页脚等语义元素来代替 Div。
Now, while learning Bootstrap most of them are using Div tag.
现在，在学习 Bootstrap 时，他们中的大多数都在使用 Div 标签。
So Which is the good approach Bootstrap Div tags or HTML5 Semantic Tags and Why?
那么哪个是 Bootstrap Div 标签或 HTML5 语义标签的好方法，为什么？
Thanks.
谢谢。
回答by ylerjen
Bootstrap use Divs to show how the framework should be used. This is because divs are general block element that can be used in almost every cases for containers. But the element you are using with bootstrap doesn't matter, because it uses classes to render the elements.
Bootstrap 使用 Divs 来展示应该如何使用框架。这是因为 div 是通用块元素，几乎可以在容器的所有情况下使用。但是您在 bootstrap 中使用的元素并不重要，因为它使用类来呈现元素。
For example, you will have the same result on screen when using :
例如，使用以下命令时，您将在屏幕上获得相同的结果：
<section class="col-md-4">Hello</section>
than when using
比使用时
<div class="col-md-4">Hello</div>
The real difference will be for robots and accessibility readers because as you said, HTML5 elements are semantics.
真正的区别在于机器人和无障碍阅读器，因为正如您所说，HTML5 元素是语义。
Each developer will choose the element that he feels most comfortable with. But my point of view is : if you trust the semantical approach of html5 elements (and you should :) ) the best way would be to use html5 elements for tag that have a special meaning (like header, footer, nav, ...) and use div for all cases in which no html5 element exist.
每个开发人员都会选择他觉得最舒服的元素。但我的观点是：如果你相信 html5 元素的语义方法（你应该:)）最好的方法是使用 html5 元素作为具有特殊含义的标签（如页眉、页脚、导航等）。 ) 并在不存在 html5 元素的所有情况下使用 div。
Here is a list of all elements with their meanings : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
这是所有元素及其含义的列表：https: //developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
回答by Steven Jeuris
You should use HTML5 semantic tags, since they can help both search engines and screen readers.
您应该使用 HTML5 语义标签，因为它们可以帮助搜索引擎和屏幕阅读器。
The Bootstrap documentation and/or template you used (at your time of writing) simply seemed to lag behind. I can find no motivation as to why not to surround the bootstrap divelements (which are correctly applied for styling) with HTML5 semantic tags.
您使用的 Bootstrap 文档和/或模板（在您撰写本文时）似乎只是落后了。我找不到关于为什么不用divHTML5 语义标签包围引导元素（正确应用于样式）的动机。
For example, in the case of navthe following is recommended:
<nav role="navigation">
<ul class="nav navbar-nav">
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
</ul>
</nav>
The current bootstrap navigation for navbarpoints out the same:
Be sure to use a element or, if using a more generic element such as a , add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
一定要使用一个元素，或者，如果使用更通用的元素，例如 a ，则向每个导航栏添加一个 role="navigation" 以明确将其标识为辅助技术用户的标志性区域。
