HTML5 - Quando usar article ou section?

É comum em algumas situações não sabermos se usamos um markup <article> ou <section> pois elas são um pouco ambíguas em alguns casos. Então o que fazer para escolher a melhor sintaxe ?

 Usando  <article>

article pode ser considerada uma especialização de section. Destina-se a conteúdo que possa estar dentro de sua própria tag sem outros níveis mais profundos. Um post de um blog ou o texto de um artigo pode ser inserido dentro de uma tag <article>.

Outros exemplos de conteúdo que podem ser inseridos dentro da tag <article>:

• Vídeo e sua transcrição
• Notícias
• Comentários de um post

Abaixo segue um exemplo de markup:

<article>

<h2><code>nav</code> Não é para <em>Todos</em> os Links</h2>

<p>Embora <code>nav</code> várias vezes tenha links, isto não significa que <em>todos</em> os links de um site devam estar dentro de<code>nav</code>.</p>

</article>

<article>

<h2>Você tem <code>DOCTYPE</code>. E agora?</h2>

<p>HTML5 <code>DOCTYPE</code> deve ser explorado.</p>

</article>

Usando <section>

section é o mais genérico dos novos elementos do HTML5. A função dele é agrupar conteúdo relacionado, entretanto ele não é tão genérico quanto a tag div.

<section>

<h1>Último post do Blog</h1>

<article>

<h2><code>nav</code> Não é para <em>Todos</em> os Links</h2>

<p>Embora <code>nav</code> várias vezes tenha links, isto não significa que <em>todos</em> os links de um site devam estar dentro de<code>nav</code>.</p>

</article>

<article>

<h2>Você tem <code>DOCTYPE</code>. E agora?</h2>

<p>HTML5 <code>DOCTYPE</code> deve ser explorado.</p>

</article>

</section>

Dicas finais para decidir quando usar <article> e <section>

• Não use section simplesmente como um gancho para o CSS. Use divs e spans para isto.
• Não use section se header, footer, aside ou article forem semanticamente mais apropriados para isto.
• Não use section se não for necessário um título para dar significado ao grupo que ele engloba.