Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


O elemento ARTICLE da HTML5

Publicado em: 2012-01-29 — 17.586 visualizacoes

    

Tom Leadbetter publicou esta matéria no site html5Doctor sob licença Creative Commons que eu traduzi para meus leitores

Nós já apresentamos uma série dos novos elementos da HTML5 aqui no site HTML5Doctor, mas o elemento article escapou do nosso microscópio… até agora! Esse é um dos novos elementos para marcar seções. É por isso mesmo frequentemente confundido com os elementos section e div, mas não se preocupe, iremos mostrar as diferenças entre eles.

O que diz a especificação

Obrigado a especificação é objetiva e direta:

O elemento article destina-se a marcar um conteúdo que se constitua em um componente autossuficiente em uma página, aplicação ou site e que possa ser distribuido ou reusado de forma independente (isolada), como por exemplo via sindicalização. Tal conteúdo pode ser um post em um fórum, um artigo de uma revista ou jornal, uma matéria em um blog, um comentário de um usuário, um widget ou gadget interativo ou qualquer outro item independente de conteúdo.

Especificação do W3C

Além do seu conteúdo principal o elemento <article> tipicamente contém um cabeçalho (em geral dentro do elemento header) e algumas vezes um rodapé. A maneira mais fácil de conceituar <article> é imaginando seu uso em um weblog, tal como mencionado nos exemplos contidos na especificação: “uma matéria em um blog” e “um comentário de um usuário”. No site HTML5 Doctor nós marcamos cada matéria com o elemento <article>. Também usamos o elemento <article> para marcar os conteúdos das páginas “estáticas”, tais como, as páginas About e Contact uma vez que o elemento <article> popde ser usado para marcar “qualquer outro item independente de conteúdo”. A questão é saber o que exatamente significa qualquer outro item independente de conteúdo”?

Teste para saber o que é conteúdo independente

Conteúdo independente próprio para ser marcado com uso do elemento <article> é todo conteúdo que faça sentido isoladamente. A interpretação desse conceito é com você, contudo uma maneira fácil de chegar a uma conclusão é respondendo à pergunta: esse conteúdo é apropriado para se publicar em um feed RSS? Sem dúvida uma matéria em um weblog ou páginas estáticas são uma boa opção para um leitor de feed, assim como weblogs costumam disponibilizar feeds para comentários. Por outro lado, colocar em um feed cada parágrafo de uma matéria não teria utilidade alguma. A chave aqui é que o conteúdo deverá fazer sentido independentemente do contexto no qual foi inserido, ou seja, fazer sentido ainda que todo o conteúdo emvolta tenha sido removido.

Exemplos de uso de <article>

Uso básico de <article>

Conteúdo com um cabeçalho e algum texto que faça sentido isoladamente (considere a existência de muito mais texto sobre apples ;-)

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

<article> em um weblog

A presença da data de publicação da matéria sugere o uso do elemento <header> e nesse encontramos, também, conteúdo para ser marcado com o elemento <footer>.

  <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>
 

Uso de <article> com área de comentários marcada com <article>s aninhados

Nesse exemplo mostramos uma matéria com comentários em um weblog. Cada comentário é marcado com uso de um elemento <article> aninhado com <article>.

  <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>      
  <h3>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>        
  <h3>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>

Uso de <article> com <section>s

Você pode usar o elemento <section> para dividir o conteúdo de <article> em grupos contendo cabeçalhos próprios:

  <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>

Uso de <section> contendo <article>s

Quando apropriado um elemento <section> poderá conter elementos <article>. Já vimos esse caso no exemplo para comentários mostrado anteriormente. Um outro uso comum para esse é a categotização de páginas em um weblog:

  <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>

Uso <article> para marcar um widget

A especificação menciona que um widget interativo deve ser marcado com <article>. O exemplo a seguir mostra a marcação para um widget incorporado à página, tal como em Widgetbox.

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

O atributo pubdate

Usamos o atributo pubdate em exemplos anteriores. Trata-se de um atributo booleano a ser adicionado a um elemento time contido em <article>. Se presente, esse atributo indica que no elemento <time> a data em que <article> foi publicado. Ele admite sintaxes alternativas, como mostradas a seguir:

pubdate
pubdate="pubdate"

As sintaxes são compatíveis com as linguagens HTML e XHTML respectivamente — o resultado é o mesmo, portando use a sintaxe que lhe convier. Convém ressaltar que o atributo pubdate aplica-se somente ao elemento <article> pai ou então à pagina como um todo.

Diferenças entre <article> e <section>

Tem havido muita confusão com relação a diferença (ou diferença perceptível) entre os elementos <article> e <section> da HTML5. O elemento <article> é uma espécie de <section> especializada; ele possui um valor semântico mais específico do que o valor semântico de <section> no sentido de ser um bloco de conteúdos relacionados independente e autossuficiente. Podemos usar <section>, mas usando <article> estamos reforçando a semântica do conteúdo.

Por outro lado <section> é tão somente um bloco de conteúdos relacionados e <div> um simples bloco de conteúdos. Como mencionado anteriormente o atributo pubdate não se aplica a <section>. Para decidir qual elemento usar escolha a primeira resposta para as seguintes perguntas:

  1. O conteúdo faz sentido se inserido em um leitor de feed? Se a resposta for sim, use <article>
  2. O conteúdo é relacionado ? Se a resposta for sim, use <section>
  3. Existe relacionamento do conteúdo com a semântica? Se a resposta for não, use <div>

Dr Bruce escreveu o artigo HTML5 <article>s and <section>s, what’s the difference?, cuja leitura nós recomendamos, caso ainda reste alguma dúvida a respeito deste artigo ou nas ocasiões em que você precise usar <article>.

Sumário

Espero que este artigo tenha esclarecido para você as diretrizes para o uso correto do elemento <article>. Você tem algum exemplo sobre o uso do elemento <article> nas suas marcações HTML5 para compartilhar?

Eu gostaria também de saber o que você pensa sobre a confusão no uso dos elementos <article> e <section>. Você acredita que o artigo esclareceu suas dúvidas?

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.



capa livro javascript   capa livro html   capa livro css   capa livro jquery   capa livro ajax-jquery
capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG

Enquete

Esta matéria foi publicada em: 2012-01-29 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2012/01/29/o-elemento-article-da-html5/trackback no seu site.

11 comentários na matéria: “O elemento ARTICLE da HTML5”

  1. Ofelquis disse:

    Maujor, uma dúvida.

    No caso do article para marcar os comentários, como que eu poderia fazer a marcação, de uma resposta de um comentário? sendo que na maioria dos casos que já vi, é usamos um div, dentro de outro, mas no caso de article, não é possível, então como faríamos?

  2. Maujor disse:

    @Ofelquis
    É possível sim!
    Aninhe os elementos ARTICLE, tal como é feito com DIV ou LI em marcação HTML4.

  3. Caio Ribeiro Pereira disse:

    Cara demais esse post, me ajudou muito a distinguir com , parabéns pelo post!

  4. emidio disse:

    Uma pergunta aos mais entendidos. Qual será o futuro de todos os sites actualmente feitos em Flash ? Dou o exemplo de milhares de site de jogos online. O que será deste tipo de sites, que por acaso sou detentor de alguns ? Irão acabar, ou gaverá forma de os migrar para HTML5 ?

  5. Raphael disse:

    HELP,

    Estou com uma dúvida cruel. Vi em outros lugares que o ideal é usar apenas um por página. Certo?

    Mas vi em outro lugar que para cada article cabe um .

    Qual é o modo certo afinal??

    título do post

    título do post

    Ou

    título do post

    título do post

  6. Miriam - Mudanzas df disse:

    muitas pessoas dizem para o Flash seria o futuro, mas agora vamos ver o que desplasará HTML5 para sempre. HTML5 é mais rápido

  7. Lucas Teles disse:

    Valeu Maujor! Só vi esse post em português depois de ler todo ele em inglês no doctor! muito boa essa referência!

  8. Diana disse:

    O fim do Flash está cada vez mais próximo. Esta é uma pura verdade ! Venha o html5.

  9. Lucas Moreira disse:

    Eu simplesmente não consigo pegar a lógica de usar o article pra marcar comentários. Se essa tag serve pra marcar conteúdos independentes como pode marcar comentários, já que estes são completamente dependentes do contexto e, algumas vezes, de outros comentários? Já pesquisei sobre isso, mas nenhuma explicação me fez sanar esta dúvida.

  10. André Banderas disse:

    Já faz mais de um ano que surgiram essas novas tags e sinceramente, mesmo lendo o excelente arquivo ainda, não consigo ver como aplicar corretamente as tags article e section (a especificação pode ser objetiva e direta, mas não é clara). Nem sempre é fácil distinguir o quanto um conteúdo é independente (mesmo fazendo a perguntinha do feed, e pelo que eu vejo, na dúvida muitos vão dizer que sim). As “antigas tags” fazem todo o sentido estrutural ( nada é tão claro como um parágrafo). E vejo um futuro onde as sections, divs e articles (tables?) vão fazer uma verdadeira salada de frutas. Programo a um bom tempo e vejo outras necessidades para tags htmls, e essas duas tags são no mínimo, desnecessárias (uma delas seria mais do suficiente).

  11. Fabio Santos disse:

    Eu cheguei aqui devido a minha confusão com article x section. Fui muito bem respondido. Principalmente na conclusão final falando sobre as suas relevâncias.

    Muito obrigado.

Comentário:





Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo