HTML5 - Elemento article

O elemento article representa um conteúdo independente e altamente relevante, pode ser post, um artigo, um bloco de texto ou ainda um mini aplicativo embutido no conteúdo (widget). Pode marcar o conteúdo do documento a ser distribuído via RSS, indicado para impressão ou encaminhado por email devido á sua importância dentro do contexto geral do site ou da página. Normalmente é considerado o ponto central do conteúdo do documento.


Uso típico com os elementos básicos


Trompete

O trompete é um instrumento de sopro de metal cuja etc...

<article>
<h1>Trompete</h1>
<p>O <b>trompete</b> é um instrumento de sopro de metal cuja etc...</p>
</article>

Como um post de um blog


Trompete

Publicado em :

O trompete é um instrumento de sopro de metal cuja etc...

<article>
<header>
<h1>Trompete</h1>
<p>Publicado em : <time pubdate datetime="2010-11-03">3 novembro, 2010</time></p>
</header>
<p>O <b>trompete</b> é um instrumento de sopro de metal cuja etc...</p>
<footer>
<small>Esta obra é licenciada sob uma licença Creative Commons</small>
</footer>
</article>

Como um post de um blog com comentário


Trompete

Publicado em :

O trompete é um instrumento de sopro de metal cuja etc...

Comentários

Enviado por: joao_musico

Em :

Concordo, mas o registro agudo é difícil de controlar !

<article>
<header>
<h1>Trompete</h1>
<p>Publicado em : <time pubdate datetime="2010-11-03">3 novembro, 2010</time></p>
</header>
<p>O <b>trompete</b> é um instrumento de sopro de metal cuja etc...</p>
<section>
<h2>Comentários</h2>
<article>
<header>
<h3>Enviado por: joao_musico </h3>
<p>Em : <time pubdate datetime="2010-11-03">5 novembro, 2010</time></p>
</header>
<p>Concordo, mas o registro agudo  é difícil de controlar !</p>
</article>
</section>
</article>

Agrupados dentro de única seção


Instrumentos de sopro de metal

Trompete

O trompete é um instrumento de sopro de metal cuja etc...

Trombone

O trombone é um instrumento de sopro de metal com etc...

Trompa

A trompa é o instrumento de sopro de metal mais etc...

<section>
<h1>Instrumentos de sopro de metal</h1>
<article>
<h2>Trompete</h2>
<p>O <b>trompete</b> é um instrumento de sopro de metal cuja etc...</p>
</article>
<article>
<h2>Trombone</h2>
<p>O <b>trombone</b> é um instrumento de sopro de metal com etc...</p>
</article>
<article>
<h2>Trompa</h2>
<p>A <b>trompa</b> é o instrumento de sopro de metal mais etc...</p>
</article>
</section>

Como um widget


Tente tocar trompete

<article>
<h1>Tente tocar trompete</h1>
<embed src="flash/trompete.swf" width="500" height="200" />
</article>