Perché non possiamo usare i tag div normali invece…

L'uso di tag semantici <section> e <header> invece del <div> universale migliora l'accessibilità e la leggibilità del codice.

Accessibilità: Gli screen reader e altre tecnologie assistive usano i tag semantici per comprendere la struttura del contenuto. <header> indica la parte introduttiva (ad esempio, logo, navigazione), <section> è un blocco tematico. <div> di per sé non ha carico semantico.
SEO (Ottimizzazione per i motori di ricerca): I motori di ricerca indicizzano meglio il contenuto strutturato con i tag semantici, migliorando il posizionamento.
Leggibilità e manutenibilità del codice: I tag semantici documentano la struttura di per sé. Lo sviluppatore che legge il codice comprende immediatamente la funzione del blocco, senza dover approfondire stili o commenti.

In breve: <div> è adatto per raggruppare elementi quando la semantica non è importante (ad esempio, per applicare stili). <section> e <header> portano un carico semantico e rendono le pagine web più comprensibili sia per le macchine che per le persone.

Esempio:

<!-- Struttura semanticamente corretta -->
<header>
  <h1>Nome del sito</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Titolo della sezione</h2>
  <p>Contenuto della sezione...</p>
</section>

<!-- Esempio di uso di div, che non trasmette semantica -->
<div> <!-- header? sezione? sconosciuto -->
  <h1>Nome del sito</h1>
  <div> <!-- nav? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- sezione? -->
  <h2>Titolo della sezione</h2>
  <p>Contenuto della sezione...</p>
</div>

Perché non possiamo usare i tag div normali invece dei tag section e header?