Como usar corretamente a tag “section” em HTML5?

Estou tentando construir um layout em HTML5 e depois de ler vários artigos diferentes, estou apenas confuso. Estou tentando obter informações sobre como ele deve ser usado.

Abaixo estão as variações com as quais estou indo e voltando:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Você pode usar a tag de seção para agir como um contêiner?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

Qual é o método correto para usar a <section>tag?

A resposta está na especificação atual:

O elemento de seção representa uma seção genérica de um documento ou aplicativo. Uma seção, neste contexto, é um agrupamento temático de conteúdo, normalmente com um título.

Exemplos de seções seriam capítulos, as várias páginas com guias em uma caixa de diálogo com guias ou as seções numeradas de uma tese. A página inicial de um site pode ser dividida em seções para uma introdução, itens de notícias e informações de contato.

Os autores são encorajados a usar o elemento article em vez do elemento section quando faria sentido organizar o conteúdo do elemento .

O elemento de seção não é um elemento de contêiner genérico . Quando um elemento é necessário para fins de estilo ou como uma conveniência para scripts, os autores são incentivados a usar o elemento div. Uma regra geral é que o elemento de seção é apropriado apenas se o conteúdo do elemento for listado explicitamente no esboço do documento .

Referência:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Veja também:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Parece que houve muita confusão sobre o propósito desse elemento, mas a única coisa que foi acordada é que ele não é um wrapper genérico, como <div>é. Deve ser usado para fins semânticos, e não um gancho CSS ou JavaScript (embora certamente possa ser estilizado ou "script").

Um exemplo melhor, do meu entendimento, pode ser algo assim:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Observe que <div>, sendo totalmente não-semântico, pode ser usado em qualquer lugar no documento que a especificação HTML permitir, mas não é necessário.

Na página wiki W3 sobre estruturação de HTML5 , diz:

<section>: Usado para agrupar diferentes artigos em diferentes objetivos ou assuntos, ou para definir as diferentes seções de um único artigo.

E então exibe uma imagem que eu limpei:

Também é importante saber como usar a <article>tag (do mesmo link W3 acima):

<article>está relacionado <section>, mas é distintamente diferente. Considerando que <section>é para agrupar seções distintas de conteúdo ou funcionalidade, <article>é para conter partes independentes de conteúdo relacionadas, como postagens de blog individuais, vídeos, imagens ou itens de notícias. Pense desta forma - se você tiver vários itens de conteúdo, cada um dos quais seria adequado para leitura por conta própria e faria sentido distribuí- <article>los como itens separados em um feed RSS, então é adequado para marcá-los.

Em nosso exemplo, <section id="main">contém entradas de blog. Cada entrada de blog seria adequada para distribuição como um item em um feed RSS e faria sentido quando lida por conta própria, fora do contexto, portanto, <article>é perfeita para eles:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simples hein? Porém, esteja ciente de que você também pode aninhar seções dentro de artigos, quando fizer sentido. Por exemplo, se cada uma dessas postagens de blog tiver uma estrutura consistente de seções distintas, você também poderá colocar seções dentro de seus artigos. Pode ser algo assim:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

Meu entendimento é que SECTION contém uma seção com um título que é uma parte importante do "fluxo" da página (não um aparte). As SEÇÕES seriam capítulos, partes numeradas de documentos e assim por diante.

ARTICLE é para conteúdo distribuído - por exemplo, postagens, notícias, etc. ARTICLE e SECTION são completamente separados - você pode ter um sem o outro, pois são casos de uso muito diferentes.

Outra coisa sobre SECTION é que você não deve usá-la se sua página tiver apenas uma seção. Além disso, cada seção deve ter um título (H1-6, HGROUP, HEADING). Os títulos têm "escopo" dentro da SEÇÃO, então, por exemplo, se você usar um H1 na página principal (fora de uma SEÇÃO) e um H1 dentro da seção, o último será tratado como H2.

Os exemplos nas especificações são muito bons no momento da escrita.

Portanto, em seu primeiro exemplo, estaria correto se você tivesse várias seções de conteúdo que não poderiam ser descritas como ARTIGOS. (Com um ponto menor de que você não precisaria do #primary DIV a menos que você quisesse um gancho de estilo - tags P seriam melhores).

O segundo exemplo estaria correto se você removesse todas as tags SECTION - os dados nesse documento seriam artigos, postagens ou algo assim.

SECTIONs não devem ser usados ​​como recipientes - DIV ainda é o uso correto para isso, e qualquer outra caixa personalizada que você possa criar.

Você pode definitivamente usar a tag de seção como um contêiner. Ele existe para agrupar o conteúdo de uma forma mais semanticamente significativa do que com um div ou como a especificação html5 diz:

O elemento de seção representa uma seção genérica de um documento ou aplicativo. Uma seção, neste contexto, é um agrupamento temático de conteúdo, normalmente com um título. http://www.w3.org/TR/html5/sections.html#the-section-element

O método correto é # 2. Você usou a tag de seção para definir uma seção de seu documento. Das especificações http://www.w3.org/TR/html5/sections.html :

O elemento de seção não é um elemento de contêiner genérico. Quando um elemento é necessário para fins de estilo ou como uma conveniência para scripts, os autores são encorajados a usar o elemento div.

isso é simplesmente errado: não é um invólucro. O elemento denota uma seção semântica de seu conteúdo para ajudar a construir um esboço do documento. Deve conter um título. Se você estiver procurando por um elemento de wrapper de página (para qualquer sabor de HTML ou XHTML), considere aplicar estilos diretamente ao elemento, conforme descrito por Kroc Camen. Se você ainda precisar de um elemento adicional para estilizar, use a. Como o Dr. Mike explica, div não está morto e, se não houver nada mais apropriado, é provavelmente onde você realmente deseja aplicar seu CSS.

você pode verificar isso: http://html5doctor.com/avoiding-common-html5-mistakes/