Bootstrap and html5 - section or div?

Question

I have a question regarding using Bootstrap - I see that on default they use a lot of DIVs instead of sections etc.

I've been reading the HTML5 specification lately - when to use section and when to use div. The basic idea is that DIVs should be used only if any specific HTML5 element doesn't apply.

Now, if I want to create an HTML5 website using Bootstrap, should I change the DIVs to specific HTML elements (for example SECTION)?

Answer 1

Section tags are used to segment your web pages and makes it SEO optimized while divs are used for styling your contents.

Answer 2

Section is not for design purpose, it has specific meaning. It indicates separate sections/parts of a web page. On the other hand, div has no specific meaning. You can use divs anonymously for managing your front-end styles.

Answer 3

It really depends on your page's content but basically you could use HTML5 tags and apply bootstrap classes like this:

<section class="row">
    ...
</section>

<footer class="row">
    ...
</footer>

But as said it depends on your content, and even more, you're not forced to use <section> tags, they have the specific purpose to represents a generic document or application section, and they're not mandatory.

The <div> tags are generic tag usually used for styling, as in bootstrap. But if you want to keep the <section> tags, maybe you could prefer a mixed solution like this:

<section>
    <div class="row">
       ...
    </div>
    <div class="row">
      ...
    </div>
</section>

With this solution the <section> tag is used for grouping contents, as it should be, and the <div> tags for styling it.

Answer 4

As far as I've read using section is correct semantics and helps with SEO.