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 cases 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 : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list