Warum können wir keine normalen div-Tags anstelle von section- und header-Tags verwenden?

Die Verwendung semantischer Tags <section> und <header> anstelle des universellen <div> verbessert die Zugänglichkeit und Lesbarkeit des Codes.

1. Barrierefreiheit: Bildschirmleser und andere Assistenztechnologien verwenden semantische Tags, um die Struktur des Inhalts zu verstehen. <header> kennzeichnet den Einleitungsteil (z.B. Logo, Navigation), <section> ist ein thematischer Block. <div> trägt an sich keine semantische Bedeutung.

2. SEO (Suchmaschinenoptimierung): Suchmaschinen indexieren besser den mit semantischen Tags strukturierten Inhalt, was das Ranking verbessern kann.

3. Lesbarkeit und Wartbarkeit des Codes: Semantische Tags dokumentieren die Struktur von selbst. Der Entwickler, der den Code liest, versteht sofort die Funktion des Blocks, ohne sich in Stile oder Kommentare vertiefen zu müssen.

Kurz gesagt: <div> eignet sich zum Gruppieren von Elementen, wenn die Semantik unwichtig ist (z.B. für Stilzwecke). <section> und <header> tragen eine semantische Bedeutung und machen Webseiten sowohl für Maschinen als auch für Menschen verständlicher.

Beispiel:

<!-- Semantisch korrekte Struktur -->
<header>
  <h1>Name der Webseite</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Abschnittstitel</h2>
  <p>Inhalt des Abschnitts...</p>
</section>

<!-- Beispiel für die Verwendung von div, die keine Semantik vermittelt -->
<div> <!-- header? section? unbekannt -->
  <h1>Name der Webseite</h1>
  <div> <!-- nav? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- section? -->
  <h2>Abschnittstitel</h2>
  <p>Inhalt des Abschnitts...</p>
</div>