Dúvida sobre article, div e section - Qual a diferença entre elas e quando usar

[solilorys]

Oi pessoal, me vi com uma dúvida sobre article>, div> e section>. Qual a diferença entre elas e quando usar elas? Eu li algumas coisas, mas não entendi muito

[NayRSilva]

A diferença entre eles é basicamente semântica. Falando de uma forma beeem simplificada:

Div: Você pode pensar num div como um bloco que engloba coisas, ele é generico, você pode botar qualquer coisa dentro dele, imagens, forms, textos etc

Section: Pra começar uma section é uma Div. A diferença dela é semântica. Normalmente nós separamos um site, por exemplo, um blog, por seções. Seções de posts. Seções de imagens etc. Então normalmente utiliza-se a section para agrupar coisas parecidas, como um seção de produtos, uma seção textos etc.

Article: Também é uma div mas também é mais específico. Se a section é uma coleção de posts, o article seria um post. Ou seja ele é um div auto contido. Você não abre um article e bota dois post de blog dentro dele, você bota um.

Mas qual a diferença se você pode simplesmente usar div pra tudo? SEO, se o seu site é dividido em sections e articles e não só um bocado de div que ninguém sabe o que tá agrupando, supõe-se que ele é mais organizado.

[solilorys]

Muito obrigada, agora entendo bem melhor!

[felquis]

Oi @solilorys tudo bem/ Este assunto me faz lembrar de quando eu estava aprendendo isso, é um assunto me trás deliciosas memórias de quando eu estava começando

O jeito que eu melhor aprendi isso foi:

• lendo a spec e super aquecendo o cérebro sem entender nada kkk https://html.spec.whatwg.org/multipage/sections.html
• vendo muitos exemplos de sites reais (inclusive com olhar crítico "será que está correto dessa forma?")

Vou colocar aqui alguns exemplos potencialmente interessante. A melhor forma de se aprender, é com exemplos (pelo menos para mim)

Article

https://html.spec.whatwg.org/multipage/sections.html#the-article-element

a @NayRSilva está certíssima, apenas para complementar com o exemplo do Twitter. Cada Tweet é usado um article. Por que? Por que cada tweet pode ser usado independentemente, já viu um site que faz embed de um tweet? Pois bem, um tweet é um bom exemplo da vida real do uso do article pois um tweet pode ser re-usado em um contexto totalmente diferente e ele continua fazendo sentido por si só.

O exemplo de um blog post também, você pode fazer um embed de uma chamada para um blog post, mas o blog post inteiro sendo feito embed é algo que não se vê com frequência. Então uma chamada para uma noticia é um bom exemplo de article, tipo no G1 globo. Mas talvez a página da noticia em si não seja um bom exemplo de article pois o conteúdo todo talvez caia melhor dentro de um elemento main, ou apenas no body mesmo.

Section

https://html.spec.whatwg.org/multipage/sections.html#the-section-element

Essa sessão no site do G1 usa o elemento section.

Mas essa sessão aqui cai direitinho na explicação da Nay, porém não usa e até faria sentido usar:

Isso deve acontecer no G1 pois muitas pessoas devem participar de sessões diferentes da mesma primeira página em diferentes momentos, então uma pessoa que pensa em usar section, a outra já não vê motivo de usar section.

Porém encontrei um exemplo bom claramente incorreto no G1,

O quadro branco maior com o titulo "Mais Lidas" é uma section.
Porém os quadros amarelos (coloquei um outline amarelo pelo DevTools) são sections e deveriam ser article.

Div

https://html.spec.whatwg.org/multipage/grouping-content.html

Veja que Article e Section estão em https://html.spec.whatwg.org/multipage/sections.html e Div está em https://html.spec.whatwg.org/multipage/grouping-content.html

Eu gosto de ver div apenas como "divisão", ele serve para agrupar os elementos filhos mas segundo a spec sem "significado especial" que é a semântica que a Nay mencionou.

---

Enfim, eu nem precisava responder pq a resposta da @NayRSilva já responde, porém como eu amo o assunto eu queria dar alguns links e dar exemplos que eu particularmente gosto.

Boa sorte!

[solilorys]

Muito obrigada, ajudou demais!!

[igorlvicente]

https://schema.org/ pode ajudar