Semantisches HTML

Semantisches HTML beschreibt den Einsatz von HTML-Elementen, die den inhaltlichen Zweck eines Abschnitts oder Elements ausdrücken. So wird eine Website sowohl für Suchmaschinen als auch für assistive Technologien besser verständlich und navigierbar.

Bedeutung

  • Bessere Zugänglichkeit: Screenreader können Seitenstruktur und Inhalte korrekt interpretieren.

  • Strukturierte Navigation: Tastaturnutzer:innen finden sich durch klare Rollen und Hierarchien besser zurecht.

  • Wartbarkeit: Klare Auszeichnung verbessert langfristige Codepflege und Lesbarkeit.

Beispiele semantischer Elemente

Zweck Semantisches Element
Hauptinhalt <main>
Navigation <nav>
Artikel oder Blogpost <article>
Abschnitt eines Texts <section>
Überschriftenstruktur <h1> bis <h6>
Schaltfläche <button> statt <div onclick="">

Best Practices

  • Immer passende Tags verwenden
    → z. B. <button> statt <span> für klickbare Elemente.

  • Korrekte Überschriften-Hierarchie einhalten
    → Keine Sprünge wie von <h1> direkt zu <h4>.

  • Vermeidung rein visueller Markup-Strukturen
    → Keine <div>-Wüsten – lieber strukturierende Tags verwenden.

Herausforderungen

  • Fehlgebrauch von semantischen Elementen (z. B. <article> für Navigation).

  • Visuelle Designvorgaben können Entwickler:innen zu semantikfreien Workarounds verleiten.

  • Legacy-Code oder Baukastensysteme bieten manchmal keine semantisch sinnvolle Struktur von Haus aus.