HTML5: O Elemeto <article>

O < article > é um elemento, que muitas vezes é confundido com < section > e < div > , mas não se preocupe, vamos explicar a diferença entre eles. Segundo W3C o < article > é um elemento que representa um componente de uma página que consiste em uma composição auto-contida em um documento, página, no local da aplicação, ou e que se destina a ser distribuído de forma independente ou reutilizável, por exemplo, em syndication. Este poderia ser um post no fórum, um artigo de revista ou jornal, uma entrada de blog, um widget interativo ou gadget, ou qualquer outro item de conteúdo independente.

Além de seu conteúdo, o < article > normalmente está em um título ( muitas vezes inserido em elementos de cabecalho) ou até em um rodapé. A forma mais simples de conceituar um < article > é penser em sua utilização em um blog ou site. Nós também podemos utilizar o < article > na “estática” das paginas de contéudo, o < article > pode ser utilizado em qualquer item da página independente de conteúdo. A única parte complicada é, o que exatamente é um item independente de conteúdo?

O teste de cheiro

Uma peça de conteúdo independente pode ser considerada adequada para implementarmos o elemento < article > ou seja o conteúdo faz sentido por si próprio. Esta medida adorada funciona mais como um 'teste de cheiro' ou semelhante a um feed RSS. Evidente que em um weblog de artigos e páginas estáticas faz sentido a utilização um leitor de feeds, alguns sites possuem feeds de comentários. Por outro lado, uma alimentação com cada parágrafo deste artigo com um post separado não seria de muita utilidade. O ponto mestre aqui trata-se do conteúdo que tem que fazer sentido independentemente do seu contexto.

Exemplos de < article > em uso

Um esqueleto < article >. Nós só temos um título e algum conteúdo, mas é o suficiente para fazer sentido por si próprio.

Código:

<article>
    <h1>Apple</h1>
    <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
    ...
</article>

Um weblog estilo < article >


A data de publicação nos leva a inserir um
, e há também um conteúdo que seria adequado em uma

de elementos. 

Código:

<article>
    <header>
        <h1>Apple</h1>
        <p>Published: <time pubdate="pubdate">2009-10-09</time></p>
    </header>
    <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
    ...
    <footer>
        <p><small>Creative Commons Attribution-ShareAlike License</small></p>
    </footer>
</article>

Um < article > com comentários


Este exemplo nos mostra uma entrada de blog com comentários. Cada comentário pode ser marcado como um < article >.

Código:

<article>
    <header>
        <h1>Apple</h1>
        <p>Published: <time pubdate datetime="2009-10-09">9th October, 2009</time></p>
    </header>
    <p>The <b>apple</b> is the pomaceous fruit of the apple tree...</p>
    ...
 
    <section>
        <h2>Comments</h2>
        <article>
            <header>
                <h2>Posted by: Apple Lover</h3>
                <p><time pubdate datetime="2009-10-10T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>I love apples, my favourite kind are Granny Smiths</p>
        </article>
   
        <article>
            <header>
                <h2>Posted by: Oranges are king</h3>
                <p><time pubdate datetime="2009-10-10T19:15-08:00">~1 hour ago</time></p>
            </header>
            <p>Urgh, apples!? you should write about ORANGES instead!!1!</p>
        </article>
    </section>
</article>

Um < article > com < section >


Você pode usar o elemento < section > para dividir o artigo em grupos lógicos de conteúdo com títulos:

Código:

<article>
    <h1>Apple varieties</h1>
    <p>The apple is the pomaceous fruit of the apple tree...</p>

    <section>
        <h2>Red Delicious</h2>
        <p>These bright red apples are the most common found in many supermarkets...</p>
    </section>

    <section>
        <h2>Granny Smith</h2>
        <p>These juicy, green apples make a great filling for apple pies...</p>
    </section>
</article>

A < section > contendo < article >


Se necessário, um elemento < section > pode conter alguns elementos < article > . Já vimos isso no exemplo seção de comentários acima, e outros exemplos mais comuns são as páginas homepage ou categoria de um weblog: 

Código:

<section>
  <h1>Articles on: Fruit</h1>

  <article>
    <h2>Apple</h2>
    <p>The apple is the pomaceous fruit of the apple tree...</p>
  </article>

  <article>
    <h2>Orange</h2>
    <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>
  </article>

  <article>
    <h2>Banana</h2>
    <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>
  </article>
   
</section>

Usando < article > para um widget



A especificação também menciona que um widget interativo também pode ser um < article >. O exemplo abaixo mostra como a marcação pode procurar um widget incorporado a partir de algum lugar como Widgetbox. 

Código:

<article>
  <h1>My Fruit Spinner</h1>
  <object>
    <param name="allowFullScreen" value="true">
    <embed src="#" width="600" height="395"></embed>
  </object>
</article>

O atributo pubdate



Você pode ter notado a presença do atributo pubdate nestes exemplos. O pubdate é um atributo booleano opcional que pode ser adicionado a um time element dentro do < article >. Caso exista a sua presença, esta indica que o elemento < time > é a data que o < article > foi publicado podendo ser escrita de muitas manieras, sendo esta a mais popular:

Código:

pubdate
pubdate="pubdate"


Você poderia pensar neles como HTML e XHTML, o resultado final é o mesmo para usar o estilo que você gosta. É notorio que o pubdate aplica-se apenas ao elemento
pai , ou para o documento como um todo. 


A diferença entre < article > e < section >




Tem havido muitos debates sobre a diferença (ou a falta percebida de uma diferença) entre o < article > e < section > elementos em HTML 5. O < article > é um tipo especializado de < section >, tem um significado mais específico do que semântico, o < section > na medida em que é uma organização independente, o bloco independente de conteúdo relacionado. Nós poderíamos usar < section >, mas usando < article > dá sentido mais semântico ao conteúdo. 


Por outro lado < section > é apenas um bloco de conteúdo relacionado, e < div > é apenas um bloco de conteúdo. Além disso, como mencionado acima, o atributo pubdate não se aplica a < section >. Para decidir qual desses três elementos é apropriado, escolher a primeira opção adequada: 

1. O conteúdo faria sentido por si próprio em um leitor de feed? Se for usar < article >?
   
2. O conteúdo é relacionado? Caso assim for usar < section >.
   
3. Finalmente, se não há nenhuma relação semântica use < div >
   

Conclusão




Esperemos que este post tenha oferecido algumas dicas sobre o uso correto do elemento < article >. Você tem outros exemplos que possa compartilhar para usar < article > em sua marcação HTML 5? Eu também estou ansioso para ouvir seus pensamentos sobre a confusão entre o < article > e < section >. Você acha que a distinção entre os dois é clara?



Fonte: OficinaDaNet