Use HTML5 tags with Bootstrap for a more Semantic website?

Question

Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?

Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?

Here a short excerpt:

<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>

At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.

Would it do any good in consideration of semantics to follow this approach?

Answer 1

The Bootstrap is unsemantic by default

Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.

But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.

HTML5 tags

Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.

Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.

Why to still use the new HTML tags

Because:

1. It's more readable.
2. It's easier to debug.
3. It's more modern.
4. It's a bit more meaningful and consequential.

So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.

… even minified version of new tags is more readable:

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