Sobes.tech
Junior

Por que não podemos usar tags div normais em vez de tags section e header?

sobes.tech IA

Resposta da IA

O uso de tags semânticos <section> e <header> em vez do <div> universal melhora a acessibilidade e a legibilidade do código.

  1. Acessibilidade: Leitores de tela e outras tecnologias de assistência usam tags semânticas para entender a estrutura do conteúdo. <header> indica a parte introdutória (por exemplo, logotipo, navegação), <section> é um bloco temático. <div> por si só não tem carga semântica.

  2. SEO (Otimização para Motores de Busca): Os motores de busca indexam melhor o conteúdo estruturado com tags semânticas, o que pode melhorar o posicionamento.

  3. Legibilidade e manutenção do código: As tags semânticas documentam a estrutura por si mesmas. O desenvolvedor que lê o código compreende imediatamente a função do bloco, sem precisar aprofundar-se em estilos ou comentários.

Resumindo: <div> é adequado para agrupar elementos quando a semântica não é importante (por exemplo, para aplicar estilos). <section> e <header> carregam carga semântica e tornam as páginas web mais compreensíveis tanto para máquinas quanto para pessoas.

Exemplo:

<!-- Estrutura semanticamente correta -->
<header>
  <h1>Nome do site</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Título da seção</h2>
  <p>Conteúdo da seção...</p>
</section>

<!-- Exemplo de uso de div, que não transmite semântica -->
<div> <!-- header? section? desconhecido -->
  <h1>Nome do site</h1>
  <div> <!-- nav? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- section? -->
  <h2>Título da seção</h2>
  <p>Conteúdo da seção...</p>
</div>