HTML semântico - Diferença entre section e article

05/02/2021

0

SECTION

O elemento HTML <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Notas de uso:

* Cada <section> deve ser identificado, geralmente incluindo um cabeçalho (elemento <h1>-<h6>) como um filho do elemento <section>.
* Se faz sentido distribuir separadamente o conteúdo de um elemento , use um elemento <article> em seu lugar.
* Não use o elemento <section> como um container genérico; para isso que a serve, especialmente quando a seção é apenas com propósito de estilização. Uma regra de ouro é quando um seção deve aparecer logicamente na estrutura de um documento.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/section

Você pode usar uma section para definir áreas ou regiões para:

Textos introdutórios
Listagens
Mapas
Comentários
Informações de contato

ARTICLE

O elemento HTML <article> representa uma composição independente em um documento, página, aplicação, ou site, o que é destinado a ser distribuído de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.

Notas de uso:

* Quando um elemento <article> está aninhado, o elemento interior representa um artigo relacionado com o elemento exterior. Por exemplo, os comentários do post de um blog podem ser elementos <article> aninhados em <article> representando o post do blog.
* Informações sobre o autor de um elemento <article> podem ser fornecidas através do elemento, mas ele não se aplica aos elementos <article> aninhados.
* A data e hora de publicação de um elemento <article> pode ser descrita usando o atributo pubdate de um elemento <time>.

Normalmente se usa um header dentro do article e também pode ser aconselhável usar um footer.

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/article

Você pode usar uma article para definir áreas ou regiões para:

Poste em Forums
Entradas de Blog
Artigos
Samuel Pires

Samuel Pires

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar