O professor tinha comentado mais em outra aula que section é uma divisão semântica, e a div é visual. Qual é a melhor situação pra usar as duas ? Focar mais na section e mexer no css depois ou fazer de outro metódo?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
O professor tinha comentado mais em outra aula que section é uma divisão semântica, e a div é visual. Qual é a melhor situação pra usar as duas ? Focar mais na section e mexer no css depois ou fazer de outro metódo?
Olá Renan, tudo bem?
O elemento <div> é o container mais genérico do HTML, pois não possui nenhum valor semântico. Pode ser utilizado para agrupar elementos afim de se aplicar estilos (usando class ou id), ou quando esse grupo compartilha valores de atributos, como o lang. Ele deve ser utilizado somente quando não houver sentido a aplicação de um outro elemento mais semântico que ele (article, section, nav, footer etc).
Já o <section>, ainda pode ser considerado "genérico" para algumas literaturas, porém possuindo mais valor semântico que o <div>. Geralmente, é utilizado para marcar uma seção da página, que é dotada de um cabeçalho (família <h1> até <h6>) que atuam como filhos do elemento <section>. Um exemplo seria uma lista de resultados de pesquisa e para descrever as seções/tópicos de um blog.
Caso queira estudar mais sobre isso, aqui estão algumas indicações de leitura:
Outro ponto importante é que nós dizemos que a <div> é mais visual, pois ela por padrão constói visualmente uma divisão no conteúdo da página, é algo estético e não semântico de fato. Entretanto, é o CSS que cuidará de aplicar estilos na página.
Confirmando a sua colocação, o ideal é buscar por um HTML o mais semântico possível (uso do section) e estilizar posteriormente com CSS.
Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Bons estudos!
Marcações semânticas, transferem significado a um conteudo. Ao utilizar uma tag semântica, você ajuda leitores de tela e ferramentas de busca a "entenderem melhor" seu conteudo. Uma div, é estrutural/visual. Você pode usá-la para organizar/distribuir elementos na sua página, sem necessariamente alterar seu significado. Mais sobre o assunto aqui: https://www.w3schools.com/html/html5_semantic_elements.asp