Sim, tanto o <section>
como o <article>
parecem que são a mesma coisa e que tanto faz usar um ou outro, mas não é bem assim.
Resumo: <section>
por sí só não tem um significado, já <article>
deve ser usado para representar elementos que são independentes e auto-explicativos.
•section: A especificação diz que ele é um bloco de conteúdo semânticamente genérico, ou seja: ele não tem um significado explícito e você deveria usar ele caso não houver outros elementos mais semânticos que melhor descrevem o conteúdo em questão. A ponto chave aqui é que, o que vai dar o significado para o <section>
é um título que está dentro dele (valores do atributo role também).
Ex.:
<section>
<h2>Comentários da página</h2>
</section>
Nesse caso, o título está dando significado a aquela <section>
. Vale deixar bem claro também que, se por acaso na <section>
que você estiver usando não tiver um título dentro dela, muito possivelmente isso quer dizer que você está usando a <section>
de forma errada, e seria mais apropriado por exemplo utilizar um <div>
.
Ex.:
<section>
<button>curtir</button>
<button>não curtir</button>
<button>salvar</button>
</section>
Nesse caso até que está correto (pois nenhum elemento mais semântico poderia ser usado aqui), mas seria mais apropriado usar <div>
, principalmente se você quer apenas utilizar o elemento apenas para estilizar, onde se você apenas quer utilizar um wrapper para estilizar em hipótese alguma você usa <section>
.
•article: Ele basicamente é um elemento independente, que não possui relação direta com o restante da página e que mesmo se o seu conteúdo fosse tratado de forma independente ele continuaria fazendo sentido, pois o seu conteúdo não possui relação direita com a pagina. Ele é ideal para ser usado por exemplo para envolver o conteúdo dentro de um artigo (já que ele é independente do resto da página), tanto como os comentários da página (já que eles são independentes e podem reutilizados separadamente), ou até um card de um produto, uma propaganda, um card de um vídeo também (vídeos do YouTube)... E por aí vai. Nesse caso também é legal ter um título dentro do , mas não é obrigatório. Caso você tenha um <article>
dentro de um outro <article>
implica dizer que o elemento aninhado possui uma relação direta com o seu <article>
pai, sendo isso útil para envolver semânticamente os comentários de um artigo.
Ex.:
<article>
<header>
<h1>Como Ter dinheiro</h1>
<p>Henrique Barbosa</p>
</header>
<p>Basta ser rico KKK</p>
<section>
<h2>Comentários</h2>
<article id="comment-1">
<header>
<p>Adriano Gomes</p>
</header>
<p>Mds cara esse artigo foi uma merdaKKKKKK</p>
</article>
</section>
</article>
OBS: Perceba que o <article>
principal representa o artigo como um todo, e os artigos dentro dele representa os comentários, pois os comentários possuem uma relação direta com o artigo.
OBS2: Se você olhar bem, dentro de cada <article>
tem um <header>
. Esse header basicamente serve para dar mais informações sobre o <article>
. Você poderia usar um <footer>
também.
OBS3: Perceba também que eu usei um </section>
dentro do <article>
. Isso é normal, pois como eu disse:
ele é um bloco de conteúdo semânticamente genéricoOu seja, você dá o significado que você quiser pra ele, especialmente nesse caso aqui que eu deixei claro que ele representa a seção de comentários do artigo. Também é permitido usar um adress dentro do article para dizer onde você pode encontrar o autor daquele artigo, mas colocar o adress dentro de um article que está aninhado dentro de outro article não funciona.