Tag HTML <article>
A tag HTML <article> marca conteúdo independente como posts de blog. Aprenda sua sintaxe, papel de acessibilidade e diferença em relação a <section>.
A tag <article> é um dos elementos de seccionamento do HTML5. Ela define um trecho de conteúdo independente e autossuficiente — algo que ainda faria sentido por si só se fosse retirado da página e publicado em outro lugar. Um bom teste: se o conteúdo pudesse ser distribuído por um feed RSS, exibido como um cartão independente ou republicado em outro site sem perder o significado, ele pertence a um <article>.
Os usos típicos do elemento <article> incluem:
- um post de blog ou notícia
- uma publicação em fórum
- um cartão de produto em uma listagem
- um comentário ou avaliação de usuário
- um widget ou gadget interativo
Por que usar o elemento <article>?
O elemento <article> carrega um significado que um <div> genérico não possui:
- Acessibilidade. Quando um
<article>tem um nome acessível (por exemplo, um título referenciado viaaria-labelledby), as tecnologias assistivas o expõem como um landmarkarticle. Usuários de leitores de tela podem navegar entre artigos em vez de ler a página inteira de cima a baixo. - SEO e semântica. Mecanismos de busca e ferramentas de leitura (como o "modo de leitura" nos navegadores) usam
<article>como um sinal para o corpo principal e autossuficiente do conteúdo, ajudando-os a extrair o texto primário de uma publicação. - Manutenibilidade. A marcação descreve a finalidade do conteúdo, permitindo que seu CSS e JavaScript direcionem unidades semânticas reais em vez de ganchos de estilo.
<article> vs <section> vs <div>
Esses três elementos são fáceis de confundir. Use esta regra geral:
<article>— conteúdo autossuficiente que poderia ser distribuído ou sindicado de forma independente (um post de blog, um comentário, um cartão de produto). Pergunte: "Isso poderia existir sozinho em outro lugar?" Se sim, use<article>.<section>— um agrupamento temático de conteúdo relacionado dentro de um documento, geralmente com um título (por exemplo, "Comentários" ou "Produtos relacionados"). Faz parte do esboço do documento, mas não se destina a existir de forma independente.<div>— um contêiner genérico sem significado semântico. Use-o apenas quando nenhum outro elemento se encaixa, tipicamente apenas para estilização ou layout.
Um <article> e um <section> podem ser aninhados em qualquer direção: um <section> pode agrupar vários elementos <article>, e um <article> pode conter elementos <section> que dividem seu conteúdo. Quando elementos <article> são aninhados, o interno representa conteúdo relacionado ao externo — por exemplo, um comentário dentro de um post de blog.
Estruturando um <article>
Você pode usar alguns elementos relacionados para dar a um <article> uma estrutura completa:
- Elementos de título (
<h1>a<h6>) para titular e estruturar seu conteúdo. Cada<article>pode começar com seu próprio título. - Um
<header>para conteúdo introdutório, como o título e metadados, e um<footer>para o conteúdo de encerramento. - Um elemento
<address>para fornecer informações sobre o autor. Ele se aplica a cada<article>de forma independente, inclusive aos aninhados. - Um elemento
<time>com um atributodatetimepara marcar a data de publicação.
Múltiplas tags <article> podem ser usadas em um único documento HTML.
Sintaxe
A tag <article> vem em pares. O conteúdo é escrito entre as tags de abertura (<article>) e fechamento (</article>).
Exemplo da tag HTML <article>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>Resultado
Exemplo da tag HTML <article> dentro da tag HTML <section>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<section>
<h1>Articles about flowers</h1>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
</article>
<article>
<h2>Lilies</h2>
<p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
</article>
</section>
</body>
</html>Exemplo de um cartão de post de blog com <header>, <footer>, <time> e <address>:
Este exemplo mostra um post de blog realista e autossuficiente: um <header> contém o título e a data de publicação, um <address> fornece o autor, e um <footer> encerra o post.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<header>
<h2>How to Grow Roses</h2>
<p>
Published on
<time datetime="2026-06-17">June 17, 2026</time>
</p>
</header>
<p>Rose – the queen of flowers – is the object of worship and ardent love. With a little care, anyone can grow healthy, fragrant roses at home.</p>
<footer>
<p>Written by
<address>
<a href="mailto:[email protected]">Jane Doe</a>
</address>
</p>
</footer>
</article>
</body>
</html>Atributos
A tag <article> não possui atributos especiais próprios. Ela suporta os Atributos Globais e os Atributos de Evento.
Estilizando o elemento <article>
Por padrão, <article> é um elemento de bloco sem estilização visual, portanto tem a mesma aparência de um <div> simples. Você adiciona a aparência com CSS. A regra abaixo dá a cada artigo uma borda, espaçamento interno e externo para que os cartões sejam visualmente separados:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<article>
<h2>Roses</h2>
<p>Rose – the queen of flowers – is the object of worship and ardent love.</p>
</article>
<article>
<h2>Lilies</h2>
<p>Lily – an amazing beauty flower, one of the most ancient bulbous plants.</p>
</article>
</body>
</html>Acessibilidade e ARIA
O elemento <article> possui um papel ARIA implícito de article, portanto normalmente você não precisa adicionar role="article" manualmente. Para torná-lo um landmark navegável que leitores de tela possam listar e acessar diretamente, forneça um nome acessível — geralmente apontando aria-labelledby para o título dentro dele:
<article aria-labelledby="post-title">
<h2 id="post-title">How to Grow Roses</h2>
<p>Roses reward patient gardeners with fragrant, long-lasting blooms.</p>
</article>Elementos de seccionamento relacionados que vale combinar com <article> são <section> para agrupamentos temáticos, <aside> para conteúdo tangencialmente relacionado (como uma barra lateral), e <header> / <footer> para conteúdo introdutório e de encerramento. Veja a visão geral dos elementos de seccionamento do HTML5 para o quadro completo.