HTML5: differences between section and div

HTML5 doesn't get rid of most of the old HTML 4 elements, including the famous (or infamous) div element. The main problem with this design choice is that now we have section and div on the same boat. So what element should we use? Let's try to make things a little bit clearer.

Generic vs specific

section gathers a specific and semantic meaning, whereas div has only a generic and non-specific purpose. The former has a strong semantic purpose, while the latter has no semantic purpose.

section indicates that a portion of your document contains relevant content, while div is only a generic wrapper that can gain some semantics by adding some attributes to it (such as classes or an ID).

In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines.

Choosing the right element

As said above, section is the ideal choice for marking up the relevant content sections of your document:


<section class="chapter" id="chapter-1">

</section>

On the other hand, you can use a div as a wrapper for styling purposes:


<div id="content">
	<section class="chapter" id="chapter-1">

	</section>	
</div>

In other words, this choice is exactly the same as the previous choice between a p or a div in HTML 4. You have an element with a strong semantic purpose and another element with a few or no purpose, the latter being in fact only a generic wrapper.

Back to top