Pourquoi ne pouvons-nous pas utiliser des balises div normales à la place des balises section et header?

L'utilisation des balises sémantiques <section> et <header> au lieu du <div> universel améliore l'accessibilité et la lisibilité du code.

1. Accessibilité : Les lecteurs d'écran et autres technologies d'assistance utilisent des balises sémantiques pour comprendre la structure du contenu. <header> indique la partie introductive (par exemple, logo, navigation), <section> est un bloc thématique. <div> en soi n'a pas de charge sémantique.

2. SEO (Optimisation pour les moteurs de recherche) : Les moteurs de recherche indexent mieux le contenu structuré avec des balises sémantiques, ce qui peut améliorer le classement.

3. Lisibilité et maintenance du code : Les balises sémantiques documentent la structure d'elles-mêmes. Le développeur qui lit le code comprend immédiatement la fonction du bloc, sans avoir besoin d'examiner les styles ou les commentaires.

En résumé : <div> convient pour grouper des éléments lorsque la sémantique n'est pas importante (par exemple, pour appliquer des styles). <section> et <header> portent une charge sémantique et rendent les pages web plus compréhensibles tant pour les machines que pour les humains.

Exemple :

<!-- Structure sémantiquement correcte -->
<header>
  <h1>Nom du site</h1>
  <nav>
    <ul>
      <li><a href="#">Lien</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Titre de la section</h2>
  <p>Contenu de la section...</p>
</section>

<!-- Exemple d'utilisation de div, qui ne transmet pas de sémantique -->
<div> <!-- header ? section ? inconnu -->
  <h1>Nom du site</h1>
  <div> <!-- nav ? -->
    <ul>
      <li><a href="#">Lien</a></li>
    </ul>
  </div>
</div>

<div> <!-- section ? -->
  <h2>Titre de la section</h2>
  <p>Contenu de la section...</p>
</div>