<nav> oder <menu> (HTML5)

102

W3Schools.com und ich sind mir ziemlich sicher, dass ich mich daran erinnere, dass der W3C.org-Status <menu>für Symbolleistenmenüs und die Auflistung von Formularsteuerbefehlen verwendet werden sollte.

Welches sollte ich für mein Hauptmenü verwenden? Navoder Menu? Ist das wichtig?

html menu standards nav Slipp D. Thompson
quelle
38
Vielleicht möchten Sie w3fools lesen .
zzzzBov
Was ist ein Formularsteuerungsbefehl?
Mads Skjern

Antworten:

162

navwird für Gruppen interner Links ( aElemente) verwendet. Im Allgemeinen bedeutet dies, dass die Links zu separaten Seiten führen oder den Inhalt einer AJAX-Seite ändern sollten. Erwarten Sie eine Änderung des Inhalts, wenn Sie auf ein navElement klicken .

menuwird für Gruppen von Kontrollen verwendet ( a, input, button). Im Allgemeinen bedeutet dies, dass die Eingaben eine Funktion innerhalb der Seite ausführen sollten. Erwarten Sie eine Art Javascript-Interaktion, wenn Sie auf ein menuElement klicken .

nav: die Navigation für die Site.

menu: das Menü für eine Webanwendung.

zzzzBov
quelle
8
Interessante Tatsache: Mit der Spezifikation können <li>Elemente direkt unter einem <menu>Tag verschachtelt werden , ohne dass eine <ul>Liste erforderlich ist . Voraussetzung ist, dass das Attribut <menu>' typeweggelassen oder auf gesetzt wird "toolbar". Siehe die Spezifikation für das <li>Element und das <menu>Element .
Tomékwi
Kann mich jemand <menu>in einer der W3C HTML5-Spezifikationen darauf hinweisen ? Ich finde es in der WHAT WG-Version , aber nicht im neuesten W3C HTML 5.3-Entwurf .
Garret Wilson
10

Hier ist ein HTML5Doctor-Beitragnav mit einem Abschnitt darüber, wie er sich von anderen unterscheidet menu(im Grunde genommen in tatsächlichen Apps verwenden). Sieht aus wie du willst nav.

Su '
quelle
1

Der beste Ort, um diese Antwort zu erhalten, sind die HTML 5-Standards, die sie selbst verwenden.

Das Menü ist in HTML 5.1 2nd Edition definiert .

Es "... repräsentiert eine Gruppe von Befehlen."


Nav ist in HTML 5 definiert .

Es ist "... ein Abschnitt einer Seite, der auf andere Seiten oder Teile innerhalb der Seite verweist: ein Abschnitt mit Navigationslinks."

Es gibt Hinweise für nav, die ich nicht aufgenommen habe, aber für wichtig halte, aber ich denke, es ist am besten, wenn Sie die Definition selbst aus den Standards entnehmen.

Die Definitionen, die in diesem Beitrag als Antwort markiert sind, sind nahezu korrekt, enthalten jedoch irrelevante Aussagen, die die Antwort selbst falsch machen.

Kevin
quelle
0

<nav>ist ein Abschnitt (wie <section>oder <article>), der in Ihrer HTML-Dokumentskizze angezeigt wird. Aus diesem Grund würde ich <menu>99% der Zeit verwenden. Für mich <nav>ist dies eine Mischung aus <section>und <menu>mit der zusätzlichen Einschränkung, <nav>die speziell für die Navigation verwendet werden sollte, während <menu>sie für alles verwendet werden kann, was als Menü bezeichnet werden kann (einschließlich einer Navigationsleiste). Daher entsprechen die meisten Navigationsleisten trotz der Tatsache, dass es sich um Navigationsleisten handelt, nicht den strengen Anforderungen von <nav>und <menu>sind angemessener.

Ich habe in meiner Karriere als Webentwickler noch nie eine Situation gefunden, in der ich wollte, dass meine Navigationsleiste Teil der Dokumentskizze ist.

Nick Manning
quelle
1
Das ist falsch. Sie sollten nur selten (wenn überhaupt) die Verwendung <menu>auf einer Website , die nicht ein Web - App ist - 99% der Zeit, dass Ihr Navigations ‚Menü‘ werden statische Links zu anderen Seiten oder anderen Abschnitten auf der Seite sein, das , was <nav>für ist, nach nach der Spezifikation.
Ivan Durst
@IvanDurst, mein Punkt ist, dass, wenn Sie einfach eine Liste statischer Links erstellen, dies navkeine gute Tag-Wahl ist, da naves sich um ein Abschnittselement handelt, sodass es Teil der Dokumentkontur wird, als wäre es ein Abschnitt mit einer Überschrift und einem Inhalt. Dies ist in der Tat ein seltenes Szenario , in dem Sie Ihre wollen navwie ein Abschnitt handeln. menuwar nur ein Vorschlag als semantischer Ersatz. Ich sehe in der Spezifikation nichts, was besagt, dass es nicht auf diese Weise verwendet werden kann. Scheint zu passen. Aber wenn Sie aus irgendeinem Grund glauben, dass das Menü nur für das ist, was Sie als Web-App definieren, dann empfehle ich oloder ulals Ersatz.
Nick Manning
Gemäß der Kompatibilitätstabelle hier , <menu>hat immer noch schlechte Unterstützung zu diesem Zeitpunkt. (Stimmt es wirklich, dass Chrome keine Unterstützung dafür hat?) Sie können auch genau dieselbe Semantik erzielen, indem Sie das role="menu"Attribut einem anderen Element (z. B. einem div oder einem nav) bereitstellen . Das Rollenattribut überschreibt die Standardsemantik für jedes Element.
brennanyoung