html5 – What is the difference between<div> and<section> ?

Question:

I was reading here about the <section> element. I've read the specification, read a few articles about it, and I still can't figure out what benefit this element brings that isn't already covered by the <div> element.

I saw the example in the specification itself and found it somewhat contradictory. The W3C shows an example in which a book's table of contents is divided into sections, and the sections are formatted with CSS. But right at the beginning of the specification there is a recommendation that this should not be done:

The section element is not a generic container element. When an element is needed only for styling purposes or for scripting convenience authors are encouraged to use the div element.

So, after all, when and why use <section> instead of <div> ?

Answer:

Without going too deep, some HTML 5 elements have semantic function. Look at the example provided in the specification cited in the question:

<article> <header> <h2>Apples</h2> <p>Tasty, delicious fruit!</p> </header> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h3>Red Delicious</h3> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h3>Granny Smith</h3> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>

The idea here is to try to give meaning to different parts of a document. This can have several benefits:

  • Indexers such as Google or Yahoo! can better understand the structure of the site
  • Automatic screen readers can read content in the correct order
  • The same font can be displayed on different devices without alteration and without hacks
  • And much more

When the documentation says that you shouldn't use <section> for formatting purposes, it doesn't mean that you can't apply styles, but that it should be the sole purpose.

For example:

 <section style="font-size: 100px">TEXTO GRANDE</section> <section style="font-size: 2px">texto pequeno</section>

While the above example "works", it trashes the entire meaning of the <section> element's existence.

In summary:

  • Use <section> to represent a generic section of the document. Can apply styles.
  • Don't use <section> to format a block of text.
Scroll to Top