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.