Bootstrap and HTML5 Semantic tags

Question

I am getting started with Twitter Bootstrap and came across a question.

Recently went through some tutorials regarding HTML5 and found out about semantic elements such as header, nav, footer, etc should be used instead of Div.

Now, while learning Bootstrap most of them are using Div tag.

So Which is the good approach Bootstrap Div tags or HTML5 Semantic Tags and Why?

Thanks.

Answer 1

Bootstrap use divs to show how the framework should be used. This is because divs are general block element that can be used in almost every case for containers. But the element you are using with Bootstrap doesn't matter for styling, because Bootstrap uses classes to apply styles to the elements (except for tables which are partially stylised with tagnames).

For example, you will have the same result on screen when using:

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

than when using:

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

The real difference will be for robots and accessibility readers because, as you said, HTML5 elements are semantics.

Each developer will choose the element that he feels most comfortable with. But my point of view is: if you trust the semantical approach of HTML5 elements (and you should :) ), the best way would be to use HTML5 elements for tag that have a special meaning (like header, footer, nav, …) and use div for all cases in which no HTML5 element exist.

Here is a list of all elements with their meanings: HTML elements reference - HTML: HyperText Markup Language | MDN.

Answer 2

You should use HTML5 semantic tags, since they can help both search engines and screen readers.

The Bootstrap documentation and/or template you used (at your time of writing) simply seemed to lag behind. I can find no motivation as to why not to surround the bootstrap div elements (which are correctly applied for styling) with HTML5 semantic tags.

For example, in the case of 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>

The current bootstrap navigation for navbar points out the same:

Be sure to use a element or, if using a more generic element such as a , add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.