Bootstrap和HTML5语义标签

Question

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

最近浏览了一些关于HTML5的教程，发现应该使用页眉、导航、页脚等语义元素而不是Div。

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

那么Bootstrap Div标签和HTML5语义标签哪个更好呢?为什么？

谢谢。

Answer 1

Bootstrap使用Div来显示应该如何使用框架。这是因为div是通用的块元素，几乎可以在容器的所有情况下使用。但是使用bootstrap的元素与样式无关，因为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语义标记来包围引导div元素(这些元素被正确地应用于样式)。

例如，对于nav the 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>

current bootstrap navigation for navbar也指出了这一点：

确保使用元素，或者，如果使用更通用的元素，则向每个导航栏添加导航“role=”，以明确地将其标识为辅助技术用户的标志性区域。