O article é um dos novos elementos de divisão de seções do HTML 5. É geralmente confundido com os elementos <section> e <div> mas não se preocupe, eu vou explicar a diferença entre cada um deles.

O que diz a especificação oficial W3C?

O elemento article representa um componente de uma página que consiste em uma composição auto-suficiente em um documento, página, aplicação ou site e que possui a intenção de ser distribuída ou reutilizada de maneira independente. Poderia ser um post em um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um widget interativo ou qualquer outro item independente do conteúdo.

Indo um pouco mais a fundo nesta especificação, um elemento <article> geralmente possui um cabeçalho (na maioria das vezes dentro de um elemento header), e as vezes um footer (rodapé). A maneira mais fácil de assimilar o conceito de <article> é pensar no seu uso na prática, como o comentário de um usuário mencionado na especificação acima. A “manha” da coisa está em entender o que é um item de conteúdo independente.

Como saber o que é conteúdo independente?

Um pedaço de conteúdo independente, que poderia se encaixar dentro de um elemento <article>, é um conteúdo que faz sentido por si próprio. Eu sei que isso depende da sua interpretação, mas um teste simples seria perguntar: isso faria sentido em um feed RSS? É claro que weblogs e páginas estáticas fariam sentido num leitor de feed, e alguns sites possuem feeds de comentários do weblog. Por outro lado um feed com cada parágrafo deste post, por exemplo, não seria muito útil. O ponto chave aqui é que o conteúdo precisa fazer sentido independente do contexto, como por exemplo se todo o conteúdo ao redor do <article> fosse removido, ele ainda não perderia o sentido.

Exemplos na prática do uso de <article>

 <article> cru e simples

Este exemplo tem apenas um título e um parágrafo de conteúdo, mas é o suficiente para afirmarmos que isso é um conteúdo independente (suponha que existe mais conteúdo ao redor sobre ‘Maçãs’)

<article> dentro de um weblog

Uma data de publicação nos leva a adicionar um <header> e também possuímos conteúdo que se adequaria a um <footer>

<article> dentro de outro <article>

Sim, é perfeitamente possível aninharmos <article> dentro de outros <article>. O exemplo abaixo é um weblog com entradas de comentários de usuários que, por serem independentes do contexto, podem ser colocados dentro de <article> também.

Um <article> contendo <section>s

Você pode usar o elemento <section> para dividir o <article> em grupos lógicos de conteúdo com cabeçalhos:

 

Um <section> contendo <article>s

Quando apropriado, um elemento <section> pode conter elementos <article>. Nós já vimos isso no exemplo acima (dos comentários), e outros exemplos comuns são a homepage ou a página de categorias de um weblog:

Usando <article> como um widget

A especificação oficial também menciona que um widget interativo também pode ser um <article>. O exemplo abaixo como a marcação pode ser feita em um widget qualquer.

O atributo pubdate

Você talvez tenha reparado o atributo pubdate nestes exemplos. pubdate é um atributo opcional do tipo booleano que pode ser adicionado a um elemento <time> dentro de um <article>. Se estiver presente, indica que o elemento <time> é a data em que o <article> foi publicado. Pode ser escrito de várias formas, mas a mais comum é assim:

Você pode declara-lo como um estilo HTML e XHTML — o resultado final é o mesmo então use da maneira que quiser. Note que pubdate só se aplica ao elemento <article> pai, ou ao documento como um todo.

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

Tem havido muita confusão sobre a real diferença (ou sutil diferença) entre os elementos <article> e <section> no HTML 5. O elemento <article> é um tipo especializado do elemento <section>; possui um objetivo semântico mais específico do que o <section>, que é um bloco independente e auto-suficiente de conteúdo relacionado. Nós até poderíamos utilizar o <section>, mas usar <article> damos um significado maior ao conteúdo.

Em contrapartida, o <section> é somente um bloco de conteúdo relacionado, e <div> é somente um bloco de conteúdo. E assim como mencionei acima, o atributo pubdate não se aplica ao <section>. Para decidir quais destes três elementos é o mais apropriado, escolha a primeira opção que se encaixa ao que você precisa:

  1. O conteúdo faria sentido se estivesse em seu próprio leitor de feed? Se a resposta for sim, use <article>
  2. O conteúdo é apenas relacionado a outro? Se a resposta for sim, use <section>
  3. Finalmente, se não existe relação semântica entre o conteúdo, use <div>

 

Resumindo

Espero que este post tenha te dado alguma luz no jeito certo de utilizar o elemento <article>. Você conhece algum outro exemplo do uso de <article> no seu código HTML 5 que gostaria de compartilhar conosco?

Gostaria muito de saber também o que você acha da confusão entre os elementos <article> e <section>. Você acha que a distinção entre os dois é clara?

Fabio Ferreira on EmailFabio Ferreira on InstagramFabio Ferreira on Twitter
Fabio Ferreira

Desenvolvedor Javascript e PHP, é editor do blog Café na Veia e também atua como desenvolvedor web freelancer na cidade de São Paulo.


Author: Fabio Ferreira

Desenvolvedor Javascript e PHP, é editor do blog Café na Veia e também atua como desenvolvedor web freelancer na cidade de São Paulo.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Instagram did not return any images.

Siga também nosso Instagram!