html - Bootstrap 和 HTML5 语义标签

Question

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

最近浏览了一些有关 HTML5 的教程，发现应该使用 header、nav、footer 等语义元素而不是 Div。

现在，在学习Bootstrap的时候，大部分都是使用Div标签。

那么 Bootstrap Div 标签或 HTML5 语义标签哪个是好的方法，为什么？

谢谢。

Answer 1

Bootstrap 使用 div 来展示应该如何使用框架。这是因为 div 是通用的 block 元素，几乎可以用于容器的所有情况。但是您在 Bootstrap 中使用的元素对于样式并不重要，因为 Bootstrap 使用类将样式应用于元素(除了使用标记名部分样式化的表格)。

例如，您将在屏幕上看到相同的结果:

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

比使用时:

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

真正的区别在于机器人和无障碍阅读器，因为正如您所说，HTML5 元素是语义化的。

每个开发者都会选择他觉得最舒服的元素。但我的观点是:如果你相信 HTML5 元素的语义方法(你应该 :))，最好的方法是将 HTML5 元素用于具有特殊含义的标签(如 header , footer, nav, ...) 并在所有不存在 HTML5 元素的情况下使用 div。

这是所有元素及其含义的列表:HTML elements reference - HTML: HyperText Markup Language | MDN .