Section e div | HTML5 e CSS3 parte 4: avançando no CSS

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!