Semantisches HTML bedeutet, dass du HTML-Elemente entsprechend ihrer tatsächlichen inhaltlichen Bedeutung verwendest. Eine Überschrift wird also als Überschrift ausgezeichnet, eine Navigation als Navigation und ein Button als Button.
Was bedeutet Semantik bei HTML?
HTML beschreibt nicht nur, wie Inhalte technisch in einem Dokument angeordnet sind. Viele Elemente teilen Browsern und anderen Programmen gleichzeitig mit, welche Funktion ein Inhalt besitzt.
Das Element <nav> kennzeichnet beispielsweise einen Navigationsbereich, <main> den zentralen Inhalt einer Seite und <article> einen in sich geschlossenen Beitrag. Eine Überschrift erhält mit <h1> bis <h6> eine andere Bedeutung als Text, der lediglich mit CSS groß und fett dargestellt wird.
Der HTML-Standard weist Elementen ausdrücklich solche Bedeutungen zu. Browser, Suchmaschinen und andere Programme können diese Informationen verwenden, um Aufbau und Funktion eines Dokuments besser einzuordnen.
Warum ist semantisches HTML wichtig?
Ein wesentlicher Vorteil liegt bei der Barrierefreiheit. Screenreader können echte Überschriften, Navigationsbereiche, Listen oder Buttons erkennen und Nutzerinnen und Nutzern entsprechende Navigationsmöglichkeiten anbieten.
Ein als <button> ausgezeichnetes Bedienelement besitzt beispielsweise bereits Eigenschaften für Tastaturbedienung, die ein optisch entsprechend gestaltetes <div> nicht automatisch mitbringt. MDN empfiehlt deshalb, möglichst native HTML-Elemente für ihren vorgesehenen Zweck zu verwenden. Zusätzliche ARIA-Rollen sollen semantisches HTML ergänzen, nicht ohne Grund ersetzen.
Semantik verbessert außerdem die Wartbarkeit. Wenn Entwicklerinnen und Entwickler einen Quelltext öffnen, erkennen sie schneller, welcher Bereich Hauptinhalt, Navigation oder ergänzende Information enthält.
Welche Rolle spielt semantisches HTML für SEO?
Suchmaschinen analysieren HTML, um Struktur und Inhalt einer Seite zu verstehen. Sinnvoll verwendete Überschriften, Links und andere Elemente geben dabei zusätzliche Hinweise auf den Aufbau des Dokuments.
Das bedeutet jedoch nicht, dass allein durch den Austausch von <div>-Elementen gegen <section> oder <article> automatisch bessere Rankings entstehen. Semantisches HTML schafft vielmehr eine saubere technische Grundlage. Es hilft Suchmaschinen und Hilfstechnologien dabei, Inhalte korrekt zu interpretieren.
Besonders wichtig ist eine nachvollziehbare Überschriftenstruktur. Überschriften sollen Inhalte gliedern und nicht nur aus optischen Gründen eingesetzt werden. Ebenso sollte ein Link tatsächlich mit einem Link-Element und eine Aktion mit einem passenden Bedienelement umgesetzt werden.
Was sind typische Fehler?
Ein häufiger Fehler besteht darin, HTML nach dem gewünschten Aussehen statt nach der Bedeutung auszuwählen. Ein Absatz wird dann zur Überschrift gestylt oder ein <div> übernimmt die Funktion eines Buttons.
Auch semantische Elemente können falsch eingesetzt werden. Ein <section> ist nicht einfach ein Ersatz für jedes beliebige Container-Element. Es sollte einen inhaltlich zusammengehörigen Abschnitt darstellen. Für rein gestalterische Gruppierungen bleiben neutrale Elemente wie <div> sinnvoll.
Semantisches HTML bedeutet daher nicht, möglichst viele besondere Tags einzusetzen. Entscheidend ist, für jeden Inhalt das Element zu verwenden, das seine Funktion am treffendsten beschreibt.
Häufige Fragen
Was ist semantisches HTML?
Semantisches HTML verwendet Elemente entsprechend ihrer inhaltlichen Bedeutung. Dadurch wird die Struktur einer Website für Browser, Suchmaschinen und Hilfstechnologien verständlicher.
Welche Elemente gehören zu semantischem HTML?
Typische Beispiele sind main, nav, article, section, header, footer und passende Überschriftenelemente. Entscheidend ist nicht der Name allein, sondern dass das Element entsprechend seiner vorgesehenen Funktion eingesetzt wird.
Verbessert semantisches HTML die SEO?
Semantisches HTML schafft eine verständliche technische Struktur und kann Suchmaschinen beim Einordnen von Inhalten helfen. Es ist jedoch kein alleiniger Garant für bessere Rankings.
