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.
Weiter im Lernpfad: HTML validieren · Verwandt: Block und Inline · Barrierefreiheit