Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 für Webdesigner

Navigationsbereiche zwischen <nav> und </nav>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film sehen Sie, wie Sie Navigationsbereiche mit dem Element nav auszeichnen können.

Transkript

In HTML5 gibt es auch ein eigenes, ein spezielles Element zum auszeichnen von Navigationsbereichen, mit dem schönen Namen NAV. Wir haben hier z.B. die Hauptnavigation, ich werfe einen kurzen Blick in den Quelltext, und wir sehen im Kopfbereich, also oben sehen Sie schon hervorgehoben die Navigation. Sie sitzt im Kopfbereich, und dann haben wir hier den NAV-Bereich, der enthält zwei Listen, einmal die Navigationspunkte oben und dann eine andere Liste, da ist dann wahrscheinlich das SUV-Formular drin. Das ist also der Navigationsbereich hier, NAV und /NAV, und das wollen wir uns jetzt hier einmal anschauen. Das NAV-Element, das Wichtigste in Kürze, "represents navigation for a document", nicht wirklich überraschend, ist das NAV-Element, ist eine Section, ein Abschnitt, der Links enthält, die zu anderen Teilen des Dokumentes oder zu anderen Dokumenten führen, also zu anderen Webseiten oder weiter unten auf der selben Seite. Nicht alle Link-Sammlungen steht hier auf einer Seite, sollten in einem NAV sein. Anfangs geht man da leicht ein bisschen über Board und packt jede Link-Liste in ein NAV-Element, das muss nicht. Hier steht "only groups of primary navigation links, mayor navigation blocks" heißt es in der Spezifikation, also wichtige Navigationsblöcke, so könnte man da übersetzten. Es gibt hier einen Code-Snippet zum angucken, hier sehen wir NAV und /NAV, da drin eine Navigationsliste, soweit so schön. Hier gibt es einen ganzen Artikel dazu bei Bedarf, hier ich gehe jetzt rüber in den Editor, ich setzte das NAV-Element auch mal mit in den Header hier und muss hier ein bisschen aufräumen, damit das übersichtlicher wird. Da haben wir die ersten Links hier rein kopiert vom Doctor für HTML5 und ein NAV-Element, soweit so gut und etwas eingerückt. Dann gibt es hier jetzt den ersten, da machen wir mal richtig einen Link davon, das wird natürlich der Link zur Startseite, und den kopiere ich jetzt ein paar Mal und füge den hier ein. Da wir keine Seiten haben, nehme ich dafür einfach das Raute-Zeichen als Link, jetzt nehmen wir mal "Videos", gibt es hier und natürlich eine Download-Seite darf nicht fehlen, die wird immer am häufigsten angeklickt. Fertig ist unser NAV-Element. Wir haben hier NAV und /NAV, eine ungeordnete Liste drin mit drei Links, das sieht alles in Ordnung aus soweit, /Hyperlinks alles da und dann einmal rüber in den Browser gespeichert ist, und hier "Neu laden", und Sie sehen hier eine völlig ungestaltete Navigationsliste, die aber in einem NAV-Element steht, wie wir hier noch einmal sehen können. Da ist das NAV, das umschließt alles, und das kann man im HTML natürlich auch gestalten.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!