将 HTML5 标签与 Bootstrap 一起使用以获得更语义化的网站？

Question

看过其中一个 Bootstrap Expo sites Tsaa Tea Shop 的来源后，我想知道他们做了什么，在 BS 类之间添加语义 HTML5 标签，是否会给网站带来更好的语义值？

考虑到他们经常使用 section element，这是否可以被视为对 HTML5 tags/elements 和 BS 的公认和良好使用？

这里是一段简短的摘录：

<section class="about-us block">
    <div class="container">
        <div class="row">

            <div class="col-md-8 text-center">
                <h2 class="section-title">Welcome</h2>

                <span class="fa fa-leaf"></span>
            </div>

        </div>
    </div>
</section>

<section class="quote block">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>"We loved our relaxing time with great food and beverages..."</h2>
            </div>
        </div>
    </div>
</section>

目前我正在着手一个较小的项目，脑子里有一些简单的单页布局。

按照这种方法考虑语义会有什么好处吗？

Answer 1

默认情况下 Bootstrap 是无语义的

Twitter Bootstrap 是市场上最无语义 的框架之一。如果你把你的代码类像 container、form-control 或 col-sm-2 你就不能是语义的。

但有时您并不想成为。您希望可读性、实用性和可维护性——这就是为什么它是为它而设计的，而且它非常棒。

HTML5 标签

是的，是的。我们有所有这些新的、性感的、有用的、多年需要的 HTML5 标签，例如：article、section、nav、main、header , footer 或 details .. 但让我们面对现实 - section 几乎和往常一样糟糕 div.

section的

Semantic几乎为零。天哪 - 这是一个带有 display:block 的标签， 被称为 "section"。它最大的（也许是唯一的）优势是提高了可读性，而不是语义。这样就够了。

为什么还要使用新的 HTML 标签

(1) 因为可读性更强。 (2) 更容易调试。 (3) 更现代。 (4) 它更有意义、更重要。

因此，如果您面临决定 - 使用或不使用 HTML5 标签，请执行任何操作，但不要继续 div-癌症是建立在网络上的。

.. 即使是新标签的缩小版本也更具可读性：

<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>

将 HTML5 标签与 Bootstrap 一起使用以获得更语义化的网站？

Use HTML5 tags with Bootstrap for a more Semantic website?

css

html

twitter-bootstrap

semantic-markup

默认情况下 Bootstrap 是无语义的

HTML5 标签

为什么还要使用新的 HTML 标签