Truques e Dicas 19 de Julho de 2012

HTML5 – Conhecer o importante Elemento Article

O elemento article é de facto um dos mais importantes elementos que o HTML5 veio propor. E é também um dos mais confusos. O que é certo é que pretende representar o que de mais comum e importante existe na web: artigos.

O elemento Article representa um bloco independente de conteúdo, conteúdo que possa existir por si só e que possa ser reutilizável.

Considere o conteúdo que está contido nas RSS feeds. Trata-se de um conteúdo que contém apenas o essencial para representar um artigo, e que poderá ser retirado da feed, continuando a fazer sentido.

A especificação HTML5 sugere alguns exemplos do que é um artigo e como pode ser utilizado, referindo exemplos como um tópico de fórum, artigos, posts ou artigos submetidos pelos utilizadores.

O código fonte abaixo demonstra como um artigo pode ser facilmente organizado utilizando o elemento Article.

<article>
  <header>
    <h1>Viva o HTML5</h1>
    <p>escrito por XPTO</p>
  </header>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et...</p>
  <h2>Categoria XYZ</h2>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><br />
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>
  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus Magna. Cras em mi em felis aliquet congue. UT um est eget ligula molestie gravida. .. Danuza</p>blockquote>
  <h3>E titulo</h3><br />
  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><br />
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus Magna. Cras em mi em felis aliquet congue. UT um est eget ligula molestie</p>
</article>

Esta porção de código, em HTML5, representa um artigo que, independentemente de estar incluído noutra página ou sozinho, continua a fazer sentido.

E como pode ver pode conter todos os tipos de elementos HTML, desde parágrafos, listas, títulos, etc.