Div e section

Front-end
#1

Assistindo uns videos do youtube e olhando um pouco de github, percebo que muita gente utiliza div para separar formularios, etc. Por que separar com div em pleno 2022 sendo que existe section. Quando devo usar div ou section, pois estou perdido?

#2

visualmente não faz diferença alguma usar div, section, header, footer… Isso é só pra deixar o site semantico.

por exemplo, é um pouco mais dificil de entender isso

<div>
   <div>
      ...
      Topo da pagina
      ...
   </div>

   <div>
       ...
       Conteúdo central
       ...
   <div>

   <div>
       Fim da pagina
   </div>
<div>

do que isso:

<div>
   <header>
      ...
      Topo da pagina
      ...
   </header>

   <section>
       ...
       Conteúdo central
       ...
   <section>

   <footer>
       Fim da pagina
   </footer>
<div>

mas de qualquer forma, as duas maneiras funcionam e o resultado é literalmente o mesmo. Existem boas praticas em tudo, em html não seria diferente, mas sinceramente, esse é o tipo de coisa que eu não vejo ninguém reclamando muito não

2 curtidas
#3

Como sou iniciante em front end, html semântico é mais visivel aos olhos do que html puro div.
Estava com uma duvida grande sobre div, mas como nao faz muita diferenca. Obg man

1 curtida
#4

Faz diferença sim. Pode até não fazer visualmente à primeira vista, para muitos casos, mas tem vários aspectos a se considerar, ao se optar por um ou outro.

Muitas das novas tags do HTML5 são semânticas, ou seja, dão significado aos trechos definidos por elas. É diferente do div, que não tem semântica nenhuma (é “genérica”, sem significado, pode ser “qualquer coisa”).

Uma das diferenças é que, ao usar tags semânticas (section, article, nav, header, footer, e muitas outras), a estrutura da página pode ser lida por programas que a entenderão mais facilmente. Entre eles, podemos citar SEO (Search Engine Optimization - robôs como os do Google podem ler a página e entender melhor suas “partes”) e leitores de tela (que podem entender e exibir melhor seções relevantes da página, ou ter modos customizados para cada elemento, por exemplo). Já se a página tem apenas um monte de div's, esses programas não conseguem (ou tem mais dificuldade) de entender a estrutura da página, pois um div pode ser qualquer coisa. Inclusive a própria documentação cita esses dois casos.

E só pra constar, nem sempre essas tags produzirão o mesmo resultado (visualmente falando). Por exemplo, este HTML:

<h1>This is the main header</h1>
<section>
  <h1>This is a subheader</h1>
  <section>
    <h1>This is a subsubheader</h1>
  </section>
</section>
<section>
  <h1>This is a second subheader</h1>
</section>

Testando no Chrome, e sem CSS, foi exibido assim:

section

Repare que, apesar de ter usado h1 para todos os títulos, eles são mostrados de forma diferente (os que estão em uma section mais interna ficam com uma fonte menor). Isso acontece porque cada section introduz um “novo nível na hierarquia” (aumenta em 1 o outline depth).

Mas se eu usar div:

<h1>This is the main header</h1>
<div>
  <h1>This is a subheader</h1>
  <div>
    <h1>This is a subsubheader</h1>
  </div>
</div>
<div>
  <h1>This is a second subheader</h1>
</div>

Não existe mais esta hierarquia, e todos os h1 são exibidos da mesma forma:

div

Claro que daria para “resolver” (mudar o tamanho dos h1 internos) com CSS, mas ainda sim, perceba que com section as coisas ficam naturalmente hierarquizadas (cada h1 “sabe” em que nível da hierarquia está). E isso facilita também para os casos já citados (SEO, leitores de tela, etc).

Você mesmo pode conferir a diferença aqui e aqui.

Resumindo, não é a mesma coisa. Superficialmente, pode até parecer, mas não é. Leitura adicional:

2 curtidas
#5

.