Estou tentando a entender... | HTML5 e CSS3 parte 4: avançando no CSS

Olá Lais, tudo bem?

De fato as duas tem o mesmo resultado estético. Ambas se comportam da mesma maneira visual.

O elemento <div> é um doas elementos mais genéricos do HTML, pois não possui nenhum valor semântico, poderíamos usá-la até mesmo no lugar de um <h1> ou <p> , mas pq usar elementos especificos?

Pois o HTML é uma linguagem de marcação de conteúdo, ou seja, se marcamos o conteudo de forma genérica demais ou mesmo errada, estamos falhando em passar significado para nosso codigo, semantica.

Então quando utilizamos <div>?

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:

Sendo assim, temos sempre que buscar um HTML o mais semântico possível, pois isso impactará diretamente no SEO e acessibilidade web.

Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Bons estudos!