Das nav-Element: Navigation mit Ansage
Das <nav> markiert einen Block mit Navigationslinks: das Hauptmenü, Breadcrumbs, ein Inhaltsverzeichnis. Der Gewinn ist unsichtbar, aber real: Screenreader kündigen den Bereich als Navigation an und bieten an, direkt hinzuspringen oder ihn zu überspringen. Wer schonmal eine Seite mit vierzig Menülinks vorgelesen bekommen hat, weiß was das wert ist.
Syntax und Beispiel
HTML-Code
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/">Start</a></li>
<li><a href="/tutorial/">Tutorial</a></li>
<li><a href="/glossar/">Glossar</a></li>
</ul>
</nav>Die Linkliste innen als ul zu bauen ist üblich und sinnvoll: Hilfstechnik sagt dann sogar an wie viele Punkte das Menü hat. Optisch wird daraus mit Flexbox ein horizontales Menü, im HTML bleibt es eine ehrliche Liste.
Mehrere Navigationen auseinanderhalten
Eine Seite darf mehrere nav-Elemente haben, etwa Hauptmenü plus Breadcrumbs. Damit man sie unterscheiden kann, bekommt jede ein aria-label: "Hauptnavigation", "Pfadnavigation", "Fußzeilen-Links". Genau so macht es diese Website hier übrigens auch, ein Blick in den Quelltext lohnt sich.
Nicht jede Linkliste ist eine nav
Das nav ist für die wesentlichen Navigationsblöcke gedacht. Drei weiterführende Links am Ende eines Artikels oder die Linksammlung im Fußbereich brauchen kein eigenes nav, sonst verliert die Auszeichnung ihren Witz. Faustregel: Würdest du den Block jemandem am Telefon als "das Menü" beschreiben, ist es eine nav. Wenn nicht, reicht eine schlichte Listte.
Typische Fehler
- Jede Handvoll Links in ein nav wickeln, siehe oben.
- Das nav vergessen und das Menü in ein nacktes div packen. Funktioniert optisch, verschenkt aber die Sprungmarken für Hilfstechnik.
- Links ohne echte Ziele, also href-lose a-Elemente als Menüpunkte. Details dazu auf der a-Seite.
Verwandt: Semantisches HTML · ul · Tutorial: Navigation erstellen