HTML nav – Header-Menü, Footer-Links, Seitennavigation …
Das <nav>-Element ist ein zentraler semantischer Baustein des modernen HTML5-Dokuments. Fast jede Website hat ein Navigationssystem — Header-Menü, Footer-Links, Seitennavigation, Breadcrumbs usw. Das nav-Element ist eine Landmarke – ein Orientierungspunkt im Dokument –, an dem sich Benutzer und Hilfstechnologien wie Screen Reader „festhalten“ können.
HTML Navigationsmenü
Das nav-Tag ist für Links zu anderen Seiten und zu Bereichen innerhalb derselben Seite reserviert. Das nav-Element soll nur für die Haupt-Navigation der Seite benutzt werden und nicht für beiläufige Links einer Seite.
<nav> <h2>Navigation</h2> <ul> <li><a href="css">CSS</a></li> <li><a href="html">HTML/a></li> <li><a href="javascript">Javascript</a></li> <li><a href="tutorial">Tutorials</a></li> </ul> </nav>
Der Platz für das Hauptmenü – die wichtigste Navigation der Seite – ist üblicherweise im Seitenkopf. Dort müssen nicht alle Links der Seite aufgeführt werden. Vorzugsweise wird die Zahl der Links auf eine übersichtliche Anzahl begrenzt.
Das footer-Element ist ein weitere Anlaufpunkt für Links: Impressum, Datenschutz und Cookie-Einstellungen sind dort ebenfalls eine Landmarke.
Inside nav – Markup für die Navigation
Fast immer sitzen die Links der Navigation innerhalb von li-Elementen eines ul-Elements, also in ungeordneten Listen. Dabei könnten ebenso einfach a-Elemente eingesetzt werden, es gibt keine Grund, keine DIV-Elemente zu nutzen und p-Elemente würden ebenfalls ihren Zweck erfüllen. Ungeordnete Listen übernehmen die Navigation sozusagen »seit und drei Jahren«: Das ul-Elemente bringt den Zusammenhang der Links der Navigation zum Ausdruck.
Die Zahl der Links für die Hauptnavigation liegt optimaler Weise zwischen vier bis sechs oder sieben, mehr würden schnell unübersichtlich. Um dennoch mehr Links unterzubringen hat die ungeordnete Liste eine Hierarchie: So entstehen Unter- oder Submenüs.
Das »Hamburger«-Symbol hat sich eingespielt als Signal für die Navigation auf kleinen ViewPort: Handys und Tablets.
