HTMLsemantik

HTMLsemantik bezeichnet die Bedeutung und Struktur von Webinhalten, die durch HTML-Elemente ausdrückt wird, statt nur durch optische Gestaltung. Ziel ist es, Inhalte sinnvoll zu gliedern, damit sie von Maschinen wie Screenreadern, Suchmaschinen und anderen Nutzerschnittstellen korrekt interpretiert werden können.

Semantische versus nicht-semantische Elemente: Nicht-semantische Elemente wie div oder span tragen in erster Linie eine Stil- oder Layoutfunktion. Semantische Elemente hingegen tragen direkte Bedeutungen in den Textfluss hinein, zum Beispiel header, nav, main, article, section, aside und footer. Weitere sinnvolle semantische Elemente umfassen figure, figcaption, time und address, die konkrete Aufgaben oder Inhalte kennzeichnen. Durch die klare Struktur erleichtert HTMLsemantik das Verständnis des Dokuments, auch wenn CSS oder Skripte fehlen.

Beispiele für gängige semantische Strukturierung: Der header kennzeichnet den Kopfbereich einer Seite oder eines Abschnitts, nav enthält Navigationslinks, main bezeichnet den Hauptinhalt, article beschreibt eigenständige Inhalte, section gruppiert thematisch verwandte Abschnitte, aside enthält ergänzende Informationen, und footer fasst Abschluss- oder Informationsblöcke zusammen. Media und Daten können durch figure/figcaption oder time mit Veranstaltungen und Datumsangaben sinnvoll ausgezeichnet werden.

Vorteile und Praxis: Semantische Markup-Strukturen verbessern Barrierefreiheit, erleichtern das Rendern durch Suchmaschinen und unterstützen Wiederverwendbarkeit sowie Wartbarkeit. Nicht zwangsläufig müssen visuelle Stile von Semantik abhängen; CSS bleibt dafür zuständig. ARIA-Rollen können ergänzend eingesetzt werden, ersetzen jedoch nicht gut gewählte semantische Elemente. Richtig angewendet, stärkt HTMLsemantik die Nutzbarkeit und Verständlichkeit von Webseiten.