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 文档和/或模板（在您撰写本文时）似乎只是落后了。我找不到关于为什么不用divHTML5 语义标签包围引导元素（正确应用于样式）的动机。

例如，在以下情况下推荐：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" 以明确将其标识为辅助技术用户的标志性区域。