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
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:
sectionelement 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
So, after all, when and why use
<section> instead of
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.
<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.
<section>to represent a generic section of the document. Can apply styles.
- Don't use
<section>to format a block of text.