Semantisches HTML: Code mit Bedeutung
Semantisch heißt: Das Element sagt was sein Inhalt ist, nicht nur wie er aussehen soll. Eine <nav> ist eine Navigation, ein <footer> ist ein Fußbereich. Diese Bedeutung können Maschinen lesen: Screenreader bieten ihren Nutzern an, direkt zur Hauptnavigation oder zum Inhalt zu springen. Suchmaschinen verstehen besser was wichtig ist. Und du selbst findest dich in deinem eignen Code nach drei Monaten noch zurecht.
Die Strukturelemente im Überblick
| Element | Bedeutung |
|---|---|
<header> | Kopfbereich einer Seite oder eines Abschnitts, oft mit Logo und Navigation. |
<nav> | Ein Navigationsblock mit den wichtigen Links. Mehr auf der nav-Elementseite. |
<main> | Der Hauptinhalt. Genau einmal pro Seite. |
<article> | Ein in sich abgeschlossener Inhalt der auch alleine stehen könnte, etwa ein Blogartikel. |
<section> | Ein thematischer Abschnitt, sinnvollerweise mit eigener Überschrift. |
<aside> | Randinhalt: Seitenleiste, weiterführende Hinweise, Kasten am Rand. |
<footer> | Fußbereich mit Impressumslinks, Copyright und Ähnlichem. |
Vorher und nachher
Div-Suppe (funktioniert, sagt aber nichts aus)
<div id="oben">...</div>
<div id="menue">...</div>
<div id="inhalt">...</div>
<div id="unten">...</div>Semantisch (gleiche Struktur, echte Bedeutung)
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Optisch ändert sich dadurch erstmal gar nichts, die Strukturelemente sind schlichte Blöcke ohne eingebautes Design. Der Gewinn liegt komplett in der Bedeutung. Das Aussehen kommt wie immer per CSS dazu.
Ehrlich gesagt: diese Seite hier
Kleines Bekenntnis in eigener Sache: HTMLWiki sieht aus wie 1998, unter der Haube stecken aber genau diese Elemente. Der graue Kasten oben ist ein header, das Menü eine nav, dieser Text steht in einem main. Retro-Optik und semantisches HTML schließen sich nämlich überhaupt nicht aus, wie das genau geht zeigen wir in Eine Webseite wie 1998 bauen.
Ein Vorher-Nachher zum Einprägen
<!-- die Div-Suppe von gestern -->
<div id="top"><div class="menu">...</div></div>
<div id="mitte">...</div>
<div id="unten">...</div>
<!-- dasselbe, sprechend -->
<header><nav>...</nav></header>
<main>...</main>
<footer>...</footer>Beide Varianten sehen mit demselben CSS identisch aus. Der Unterschied liegt darunter: Version zwei können Maschinen lesen. Screenreader bieten Sprungbefehle direkt zu main oder nav an, Suchmaschinen erkennen Haupt- von Beiwerk, und der nächste Mensch im Code (vermutlich du selbst in einem Jahr) versteht die Seite auf einen Blickk.
Die ehrliche Grenze der Semantik
Man kann es auch übertreiben. Nicht jeder Kasten braucht ein section, nicht jede Randnotiz ein aside, und ein div als reiner Styling-Container ist völlig in Ordnung, dafür ist es da. Die Faustregel: Semantische Elemente einsetzen wo ihre Bedeutung wirklich zutrifft, im Zweifel lieber ein ehrliches div als ein gelogenes article. Falsche Semantik ist nämlich schlimmer als keine, sie schickt Hilfstechnik und Suchmaschinen in die Irree.
Weiter im Lernpfad: HTML validieren · Verwandt: Block und Inline · Barrierefreiheit