¿Por qué no podemos usar etiquetas div normales en lugar de las etiquetas section y header?

El uso de las etiquetas semánticas <section> y <header> en lugar del <div> universal mejora la accesibilidad y la legibilidad del código.

1. Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia utilizan etiquetas semánticas para entender la estructura del contenido. <header> indica la parte introductoria (por ejemplo, logotipo, navegación), <section> es un bloque temático. <div> por sí solo no tiene carga semántica.

2. SEO (Optimización para Motores de Búsqueda): Los motores de búsqueda indexan mejor el contenido estructurado con etiquetas semánticas, lo que puede mejorar el posicionamiento.

3. Legibilidad y mantenimiento del código: Las etiquetas semánticas documentan la estructura por sí mismas. El desarrollador que lee el código comprende inmediatamente la función del bloque, sin necesidad de profundizar en estilos o comentarios.

Resumiendo: <div> es adecuado para agrupar elementos cuando la semántica no es importante (por ejemplo, para aplicar estilos). <section> y <header> llevan carga semántica y hacen que las páginas web sean más comprensibles tanto para las máquinas como para las personas.

Ejemplo:

<!-- Estructura semánticamente correcta -->
<header>
  <h1>Nombre del sitio</h1>
  <nav>
    <ul>
      <li><a href="#">Enlace</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Título de la sección</h2>
  <p>Contenido de la sección...</p>
</section>

<!-- Ejemplo de uso de div, que no transmite semántica -->
<div> <!-- ¿header? ¿section? no se sabe -->
  <h1>Nombre del sitio</h1>
  <div> <!-- ¿nav? -->
    <ul>
      <li><a href="#">Enlace</a></li>
    </ul>
  </div>
</div>

<div> <!-- ¿section? -->
  <h2>Título de la sección</h2>
  <p>Contenido de la sección...</p>
</div>