Das navigation Tag

Ein weiteres der neuen semantischen Elemente von HTML5 ist das <nav> Element. Das <nav> repräsentiert die Navigation des Dokumentes. Die Navigation kann dabei innerhalb eines Dokuments sein oder auch auf andere Dokumente verweisen, aber es ist wichtig zu verstehen, dass nicht jeder Link in einem Dokument mit dem <nav> Element beschrieben werden sollte.

Das <nav> Element sollte nur für die primäre Navigationsstruktur verwendet werden.

Wie wird das <nav> Tag nun benutzt? In "alten Tagen" hätte man wahrscheinlich ein div Element genutzt um das Menü zu erstellen:

<div id="menu">
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</div>

Oder auch eine Liste, wie im folgenden Beispiel:

<div id="navigation">
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</div>

Von der Schreibweise gibt es keine großen Unterschiede zwischen nav und div. Man muss nur das alte <div> mit dem semantisch korrekten <nav> ersetzen, wie man im folgenden Beispiel sieht:

<nav>
	<ul>
		<li><a href="home.html">Home</a></li>
		...
	</ul>
</nav>

Das heißt also das es einfach ist das <nav> Element zu benutzen, oder? Weit gefehlt! Es gibt bisher keinen Konsens auf den sich geeinigt werden konnte, für was man das <nav> Element einsetzen sollte. Für kleine Vorschaumöglichkeiten? Verwandte Posts? Seitenwechsel? Manche Leute sagen "Auf jeden Fall" andere wiederum "Auf keinen Fall".

Sollte man sich deswegen davon abhalten lassen das <nav> Element zu verwenden? Nein. Man könnte das <nav> Element für all die oben genannten Beispiele verwenden und es obliegt einem selbst wo und wann man es neutzen möchte. Man könnte sagen, da wo man früher <div id="menu"> oder <div id="navigation"> verwendet hat kann man auch das <nav> Element benutzen.

Was wir gelernt haben

• Das <nav> Element sollte für die primäre Navigationsstruktur genutzt werden.
• Man kann das <nav> Element für Vorschau, Seitenauswahl und ähnliche Posts verwenden.
• Es obliegt der eigenen Auslegung der Semantik des <nav> Elementes aufgrund derer man entscheidet wann und wo es verwendet werden soll.
• Das <nav> Element ist ein blockbasiertes Element.