O elemento <article> é uma tag semântica do HTML5 utilizada para representar um conteúdo independente dentro de uma página.
Esse conteúdo deve possuir significado próprio e poder ser distribuído ou reutilizado separadamente.
A tag <article> representa um conteúdo independente, como notícias, publicações, comentários ou produtos.
<article>
Conteúdo independente
</article>
| Área | Exemplo |
|---|---|
| Blog | Publicação de um artigo. |
| Notícias | Uma notícia completa. |
| E-commerce | Produto individual. |
| Fórum | Comentário de usuário. |
<article>
<h2>
Título do Artigo
</h2>
<p>
Texto do artigo.
</p>
</article>
<main>
<article>
<h2>
Como aprender HTML
</h2>
<p>
HTML é uma linguagem de marcação.
</p>
</article>
</main>
Uma página pode possuir diversos artigos independentes.
<main>
<article>
Notícia 1
</article>
<article>
Notícia 2
</article>
<article>
Notícia 3
</article>
</main>
<article>
<img src="html.jpg">
<h2>
Curso HTML
</h2>
<p>
Aprenda HTML do zero.
</p>
</article>
| Article | Section |
|---|---|
| Conteúdo independente. | Agrupamento de conteúdo relacionado. |
| Pode existir sozinho. | Normalmente depende da página. |
| Exemplo: notícia. | Exemplo: área de serviços. |
| Div | Article |
|---|---|
| Sem significado semântico. | Possui significado. |
| Usado para organização visual. | Usado para conteúdos independentes. |
O uso correto do article ajuda mecanismos de busca a entenderem que determinado conteúdo possui valor próprio.
Leitores de tela conseguem identificar conteúdos independentes, facilitando a navegação para usuários.
<body>
<header>
Meu Blog
</header>
<main>
<article>
<h1>
Título da Notícia
</h1>
<p>
Texto da notícia.
</p>
</article>
</main>
<footer>
Rodapé
</footer>
</body>