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!