Semantische HTML-Elemente

Lernziel

Du verstehst, warum semantische Elemente fuer Struktur, Lesbarkeit und Barrierefreiheit wichtig sind.

Semantik

Semantische Elemente beschreiben die Bedeutung eines Bereichs. Dadurch wird HTML nicht nur fuer Entwickler leichter lesbar, sondern auch fuer Suchmaschinen und Hilfstechnologien besser verstaendlich.

Beispiel

<header>...</header>
<main>
  <section>
    <article>Inhalt</article>
  </section>
</main>
<footer>...</footer>

So wirkt es in der Praxis

Im Browser erkennst du ohne CSS oft noch keinen grossen optischen Unterschied zu div Elementen. Der eigentliche Vorteil liegt in der klareren Bedeutung der Bereiche im Quellcode.

Was bewirkt der Code?

header steht meist fuer den Kopfbereich einer Seite oder eines Abschnitts. main enthaelt den zentralen Inhalt. section gruppiert zusammengehoerige Inhalte. article kann einen in sich abgeschlossenen Beitrag enthalten. footer markiert den Abschlussbereich.

Hinweis

Semantische Elemente ersetzen nicht automatisch jedes div, helfen aber dort, wo ein Bereich eine klare Bedeutung hat.