HTML5: Diferença de section e article

Uma das grandes novidades introduzidas pelas especificações da HTML5 são os elementos SECTION e ARTICLE. Esses dois novos elementos que representam alguns problemas semânticos relativos à sua utilização. A maioria dos desenvolvedores web se confundem com os elementos de SECTION e ARTICLE. Tentarei nesse artigo descrever a semântica desses elementos.

Elemento section

A seção (elemento SECTION ) é uma parte mais genérica de um documento. É geralmente usado para conter outras partes de sua página. Como o próprio nome diz, ele pode conter qualquer tipo de conteúdo. Em um sentido mais amplo do termo, este elemento é uma versão mais semântica de uma div (que significa “divisão”). Outro uso comum deste elemento está relacionado a estrutura do conteúdo. O objetivo desse elemento é marcar uma seção da página. Seção pode ser um grupo de conteúdo de um assunto específico.

Artigo sobre Como usar o elemento SECTION do HTML5.

Exemplo:

<section id="ch1">
  <header>
    <hgroup>
      <h1>Titulo</h1>
      <h2>Descrição</h2>
    </hgroup>
  </header>
  <!--conteúdo-->
  <footer>
    <!--rodapé -->
  </footer>
</section>

Elemento article

Ao contrário de seção, artigo é um componente mais específico. Sua finalidade é envolver os principais conteúdos do seu documento em seções lógicas. Entradas de blog, artigos, o conteúdo da página podem ser incluídos dentro deste elemento. Combinado com o elemento SECTION, que completa a estrutura geral de um documento HTML5.

Exemplo usando os dois elementos.

<section id="ch1">
  <header>
    <hgroup>
      <h1>Título</h1>
      <h2>Descrição</h2>
    </hgroup>
  </header>
  <article>
    <!--conteúdo-->
  </article>
  <footer>
    <!--rodapé-->
  </footer>
</section>

Podemos usar esses elementos da seguinte forma também:
Observe o uso do elemento hgroup que serve para agrupar os elementos de H1 a H6

<article>
 <hgroup>
   <h1>Título do artigo</h1>
   <h2>subtítulo do artigo</h2>
 </hgroup>
   <p>parágrafo...</p>
 <section>
  <h3>Título da primeira seção</h3>
  <p>Conteúdo da primeira seção</p>
 </section>

 <section>
  <h3>Título da segunda seção</h3>
  <p>Conteúdo da segunda seção</p>
 </section>
</article>