22

Estava a ler aqui sobre o elemento <section>. Li a especificação, li alguns artigos sobre, e ainda não consegui entender qual benefício esse elemento traz que já não seja coberto pelo elemento <div>.

Vi o exemplo na própria especificação e achei um tanto contraditório. A W3C mostra um exemplo no qual o sumário de um livro é dividido em seções, e as seções são formatadas com CSS. Mas logo no início da especificação há uma recomendação que diz que isso não deve ser feito:

O elemento section não é um elemento de container genérico. Quando um elemento é necessário somente por propósitos de estilização ou por conveniência para script os autores são encorajados a usar o elemento div.

Então, afinal, quando e por que usar <section> ao invés de <div>?

2
  • 1
    Eu gosto da explicação dada pelo html5doctor neste flowchart. Commented 27/05/2014 às 12:44
  • Ótimo artigo, esta atual até os dias de hoje. Commented 26/10/2018 às 0:14

3 Respostas 3

26

Sem aprofundar muito, alguns elementos do HTML 5 tem função semântica. Olhe o exemplo disponibilizado na especificação citada na pergunta:

<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>

A ideia aqui é tentar dar significado às diferentes partes de um documento. Isso pode trazer vários benefícios:

  • Indexadores como o Google ou Yahoo! podem entender melhor a estrutura do site
  • Leitores automáticos de tela podem ler o conteúdo na ordem correta
  • O mesmo fonte pode ser apresentado em diferentes dispositivos sem alteração e sem gambiarras
  • E muito mais

Quando a documentação diz que você não deve usar o <section> para fins de formatação, ela não quer dizer que você não pode aplicar estilos, mas que deve ser o único objetivo.

Por exemplo:

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

Embora o exemplo acima "funcione", ele joga no lixo todo o sentido da existência do elemento <section>.

Em resumo:

  • Use <section> para representar uma seção genérica do documento. Pode aplicar estilos.
  • Não use <section> somente para formatar um bloco de texto.
10

A tag <section> carrega consigo a responsabilidade semântica do HTML5, ela foi desenvolvida para representar seções de um documento, essa é a idéia principal.

Sua dúvida:

O elemento section não é um elemento de container genérico. Quando um elemento é necessário somente por propósitos de estilização ou por conveniência para script os autores são encorajados a usar o elemento div.

Isso quer dizer que a <section> tem um propósito, ela não deve ser usada apenas por necessidades de estilização, como por exemplo, colocar um float ou estilizar um bloco específico. Ela pode sim conter uma estilização, desde que esse conteúdo realmente seja uma outra seção do seu documento.

Podemos comparar o uso dela com a página de um jornal, teríamos uma página, com diversas seções..

<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>

Pode-se perceber, que a estilização a partir do H1 estando dentro da section, mudou em relação ao H1 que está dentro da article, isso acontece devido o reconhecimento da semântica. Dessa forma, não há conflitos com SEO.

1

O beneficio de usar é de carater semântico. Se você usar pensando somente na formatação no css realmente não haverá diferença. Mas se você escrever pensando na semântico do html, voce criará facilitadores para os sistemas de busca tais como GOOGLE, YAHOO.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .