Bootstrap和HTML5语义标签

Question

我开始使用Twitter Bootstrap并遇到了一个问题。

最近浏览了一些关于HTML5的教程，并发现了关于语义元素，如标题，导航，页脚等应该用来代替Div。

现在，在学习Bootstrap时，他们中的大多数都使用Div标签。

那么Bootstrap Div标签或HTML5语义标签的优秀方法是什么？为什么？

谢谢。

Answer 1

Bootstrap使用Div来显示框架应该如何使用。 这是因为div是一般的块元素，几乎在每种情况下都可以用于容器。 但是你使用bootstrap的元素无关紧要，因为它使用类来渲染元素。

例如，使用时，屏幕上会显示相同的结果：

<section class="col-md-4">Hello</section>

比使用时

<div class="col-md-4">Hello</div>

真正的区别在于机器人和可访问性读者，正如您所说，HTML5元素是语义。

每个开发人员都会选择他最满意的元素。 但我的观点是：如果你相信html5元素的语义方法（你应该:)）最好的方法是使用html5元素作为具有特殊含义的标记（如页眉，页脚，导航，... ）并且对于不存在html5元素的所有情况使用div。

以下是所有元素及其含义的列表： https ： //developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Answer 2

您应该使用HTML5语义标记，因为它们可以帮助搜索引擎和屏幕阅读器 。

您使用的Bootstrap文档和/或模板（在您撰写本文时）似乎只是落后了。 我没有动机为什么不用HTML5语义标签包围bootstrap div元素（正确应用于样式）。

例如，在nav 的情况下， 建议采用以下方法 ：

<nav role="navigation">
    <ul class="nav navbar-nav">
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
    </ul>
</nav>

导航栏的当前引导程导航指出相同：

请务必使用元素，或者，如果使用更通用的元素（如a），请在每个导航栏中添加role =“navigation”，以明确将其标识为辅助技术用户的标志性区域。