<nav> o <menu> (HTML5)

102

W3Schools.com e sono abbastanza sicuro di ricordare di aver visto lo stato di W3C.org che <menu>dovrebbe essere utilizzato per i menu della barra degli strumenti e l'elenco dei comandi di controllo dei moduli.

Allora, quale dovrei usare per il mio menu principale? Navo Menu? Importa?

— Slipp D. Thompson
fonte

38

Potresti voler leggere w3fools .

— zzzzBov

Che cos'è un "comando di controllo modulo"?

— Mads Skjern

162

navviene utilizzato per gruppi di collegamenti interni ( aelementi). Generalmente questo significa che i collegamenti dovrebbero viaggiare verso pagine separate o modificare il contenuto nel caso di una pagina AJAX. Aspettati una sorta di modifica del contenuto quando fai clic su un navelemento.

menuviene utilizzato per gruppi di controlli ( a, input, button). Generalmente questo significa che gli input dovrebbero svolgere una funzione all'interno della pagina. Aspettati una sorta di interazione javascript quando fai clic su un menuelemento.

nav: la navigazione per il sito.

menu: il menu per un'applicazione web.

— zzzzBov
fonte

8

Fatto interessante: la specifica consente di nidificare gli <li>elementi direttamente sotto un <menu>tag, senza la necessità di un <ul>elenco. Il requisito è che l' attributo <menu>s typesia omesso o impostato su "toolbar". Vedere le specifiche per l' <li>elemento e l' <menu>elemento .

— tomekwi

Qualcuno può indicarmi <menu>in una delle specifiche HTML5 del W3C? Lo trovo nella versione WHAT WG , ma non nell'ultima bozza W3C HTML 5.3 .

— Garret Wilson,

10

Ecco un post su HTML5Doctornav con una sezione su come è diverso da menu(fondamentalmente, usalo nelle app reali). Sembra che tu voglia nav.

— su'
fonte

1

Con il <menu>è solitamente usato per i menu contestuali.

MDN ha una buona documentazione su di esso: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

— Jack
fonte

1

Il posto migliore per ottenere questa risposta sono gli standard HTML 5 stessi.

Il menu è definito in HTML 5.1 2nd Edition .

Esso, "... rappresenta un gruppo di comandi."

Nav è definito in HTML 5 .

Si tratta di "... una sezione di una pagina che collega ad altre pagine oa parti all'interno della pagina: una sezione con collegamenti di navigazione".

Ci sono note per la navigazione che non ho incluso ma che ritengo importanti, ma penso che sia meglio per te ottenere la definizione dagli standard.

Le definizioni contrassegnate in questo post come risposta sono quasi corrette ma contengono affermazioni estranee che rendono la risposta sbagliata.

— Kevin
fonte

0

<nav>è una sezione (come <section>o <article>) quindi apparirà nella struttura del documento HTML. Per questo motivo, userei il <menu>99% del tempo. Per me, <nav>è un mix tra <section>e <menu>, con la costrizione aggiunta che <nav>dovrebbe essere usata specificamente per la navigazione, mentre <menu>può essere per tutto ciò che potrebbe essere chiamato un menu (inclusa una barra di navigazione). Quindi la maggior parte delle barre di navigazione, nonostante siano barre di navigazione, non soddisfano i severi requisiti di <nav>ed <menu>è più appropriata.

Nella mia carriera di sviluppatore web non ho mai trovato una situazione in cui volevo che la mia barra di navigazione fosse parte della struttura del documento.

— Nick Manning
fonte

1

Questo non è corretto. Dovresti usarlo raramente (se non mai) <menu>su un sito Web che non è un'app Web: il 99% delle volte, il tuo "menu" di navigazione sarà costituito da collegamenti statici ad altre pagine o altre sezioni della pagina, che è ciò che <nav>serve, secondo alle specifiche.

— Ivan Durst

@IvanDurst, il punto è che se stai costruendo semplicemente un elenco di link statici, navnon è una buona scelta di tag perché navè un elemento di sezione, quindi diventerà parte della struttura del documento come se fosse una sezione con un'intestazione e un contenuto. Questo è in effetti uno scenario raro in cui vuoi che ti navcomporti come una sezione. menuera solo un suggerimento come sostituzione semantica. Non vedo nulla nelle specifiche che dica che non può essere utilizzato in questo modo. Sembra adattarsi. Ma se per qualche motivo credi che il menu sia solo per quella che definisci un'app web, allora ti consiglio olo ulcome sostituto.

— Nick Manning

Secondo la tabella di compatibilità qui , <menu>ha ancora scarso supporto in questo momento. (È proprio vero che Chrome non lo supporta ??) Inoltre, puoi ottenere la stessa identica semantica fornendo l' role="menu"attributo a un altro elemento (ad esempio un div o un nav). L'attributo del ruolo sostituisce la semantica predefinita per qualsiasi elemento.

— brennanyoung