What is the difference between <div> and <Section>?

Question

I was reading here about the element <section>. I read the specification, I read some articles about, and I still can’t understand what benefit this element brings that is no longer covered by the element <div>.

I saw the example in the specification itself and found it somewhat contradictory. The W3C shows an example in which the summary of a book is divided into sections, and the sections are formatted with CSS. But early on in the specification there is a recommendation that it should not be done:

The element section 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 element div.

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

Answer 1

Without going too deep, some elements of HTML 5 have function semantics. Look at the example provided in the specification quoted 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 the different parts of a document. This can bring several benefits:

• Indexers like Google or Yahoo! can better understand the structure of the site
• Automatic screen readers can read the content in the correct order
• Same source can be displayed on different devices without modification and without gambiarras
• And much more

When the documentation says that you should not use the <section> for formatting purposes, it does not mean that you cannot apply styles, but that should be the only goal.

For example:

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

Although the above example "works", it throws away the whole meaning of the element’s existence <section>.

In short:

• Use <section> to represent a generic section of the document. You can apply styles.
• Do not use <section> only to format a block of text.

Answer 2

The tag <section> carries with it the semantic responsibility of HTML5, it was developed to represent sections of a document, this is the main idea.

Your doubt:

The Section element is not a generic container element. When a element is necessary only for stylization purposes or for convenience for script authors are encouraged to use the element div.

That means that the <section> has a purpose, it should not be used only for styling needs, such as putting a float or styling a specific block. It can rather contain a stylization, as long as that content really is another section of your document.

We can compare the use of it with the page of a newspaper, we would have a page, with several sections..

<article id="esportes">
 <hgroup>
  <h1>Esportes no Brasil</h1>
  <h2>Um pouco sobre o que está acontecendo no mundo dos esportes</h2>
 </hgroup>
 <section id="futebol">
  <h1>Futebol</h1>
  <p>conteúdo</p>
 </section>
 <section id="basquete">
  <h1>Basquete</h1>
  <p>conteúdo</p>
 </section>

</article>

You can see, that the stylization from H1 being inside Section, has changed in relation to H1 that is inside the article, this happens due to the recognition of semantics. This way, there are no conflicts with SEO.

Answer 3

The benefit of using is semantic. If you only use css formatting, there really won’t be any difference. But if you write thinking of html semantics, Voce will create facilitators for search systems such as GOOGLE, YAHOO.