Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Div e Section, qual a diferença?

Eu entendi que a section é melhor encaixada quando seu conteúdo faz o mesmo sentido, sendo assim a tag fica mais semântica do que a div.

Porém eu já estava sempre usando a div com esse intuito.

Então, em qual caso uso cada uma? Se puderem dar um exemplo, eu fico imensamente grato!

2 respostas
solução!

Olá, Kelwin! Tudo bem?

A melhor dica que eu posso dar é sempre ver a div como uma tag visual. Use div se você possui um agrupamento de conteúdo que precisa estar dentro de algo para ser manipulado.

Por exemplo, aqui no fórum temos acima do seu tópico, sua foto e ao lado duas linhas: seu nome (e ao lado outros dados) e seu título. Queremos colocar a imagem ao lado dessas duas linhas, então faz sentido encapsular as duas linhas em uma tag. Como esse encapsulamento é só para podermos manipular facilmente no CSS, usamos div.

Agora, se estamos falando de um conteúdo que possui um sentido semântico quando junto, temos muitas outras opções:

  • É uma lista? Podemos usar ul ou ol;
  • É um cabeçalho? Temos o header;
  • É uma seção do seu site? Então section
  • ...

No caso específico do section, eu entendo que gere mais confusão porque realmente é o caso menos claro entre todos. Um padrão que costumam usar é verificar se aquele conteúdo possui um título e um corpo (pode ver mais aqui) para usar section.

Geralmente, se queremos bons exemplos de sections devemos olhar em sites de divulgação (como landing pages), por isso recomendo você olhar o próprio alura.com.br, que possui várias seções, como benefícios, cursos, funcionalidades.

Resumindo: seções são dificeís de determinar mesmo, então sempre use div como um plano B, procure primeiro uma tag que tenha semântica e se perceber que não serve, pode usar div. Lembre-se também que não há receita para esse tipo de coisa, quando você faz um site, é você que define o significado de tudo que está na tela do usuário, e por isso, você tem a liberdade de estruturar seu HTML da forma que acha que melhor representa aquele conteúdo.

Bons estudos!

Muito bem explicado, elucidou minha dúvida.

Muito obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software