<nav> o <menu> (HTML5)

102

W3Schools.com y estoy bastante seguro de que recuerdo haber visto el estado de W3C.org que <menu>debería usarse para los menús de la barra de herramientas y enumerar los comandos de control de formularios.

Entonces, ¿cuál debo usar para mi menú principal? Nav, o Menu? ¿Importa?

— Slipp D. Thompson
fuente

38

Es posible que desee leer w3fools .

— zzzzBov

¿Qué es un 'comando de control de formulario'?

— Mads Skjern

162

navse utiliza para grupos de enlaces internos ( aelementos). Generalmente, esto significa que los enlaces deben viajar a páginas separadas o cambiar el contenido en el caso de una página AJAX. Espere algún tipo de cambio de contenido al hacer clic en un navelemento.

menuse utiliza para grupos de controles ( a, input, button). Generalmente, esto significa que las entradas deben realizar una función dentro de la página. Espere algún tipo de interacción javascript al hacer clic en un menuelemento.

nav: la navegación del sitio.

menu: el menú de una aplicación web.

— zzzzBov
fuente

8

Dato interesante: la especificación permite anidar <li>elementos directamente debajo de una <menu>etiqueta, sin la necesidad de una <ul>lista. El requisito es que se omita el atributo <menu>' typeo se establezca en "toolbar". Consulte la especificación del <li>elemento y el <menu>elemento .

— tomekwi

¿Alguien puede señalarme <menu>una de las especificaciones HTML5 de W3C? Lo encuentro en la versión WHAT WG , pero no en el último borrador de W3C HTML 5.3 .

— Garret Wilson

10

Aquí hay una publicación de HTML5Doctornav con una sección sobre en qué se diferencia de menu(básicamente, úsela en aplicaciones reales). Parece que quieres nav.

— Su '
fuente

1

Con el <menu> se usa generalmente para menús contextuales.

MDN tiene buena documentación al respecto: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

— Jack
fuente

1

El mejor lugar para obtener esta respuesta son los estándares HTML 5.

El menú está definido en HTML 5.1 2nd Edition .

"... representa un grupo de comandos".

Nav se define en HTML 5 .

Es, "... una sección de una página que enlaza con otras páginas o con partes dentro de la página: una sección con enlaces de navegación".

Hay notas para la navegación que no incluí, pero creo que son importantes, pero creo que es mejor que obtenga la definición usted mismo de los estándares.

Las definiciones marcadas en esta publicación como la respuesta están cerca de ser correctas, pero tienen declaraciones extrañas que hacen que la respuesta sea incorrecta.

— Kevin
fuente

0

<nav>es una sección (como <section>o <article>) por lo que aparecerá en el esquema de su documento HTML. Debido a esto, usaría el <menu>99% del tiempo. Para mí, <nav>es una mezcla entre <section>y <menu>, con la restricción adicional que <nav>debería usarse específicamente para la navegación, mientras que <menu>puede ser para cualquier cosa que pueda llamarse menú (incluida una barra de navegación). Por tanto, la mayoría de las barras de navegación, a pesar de que son barras de navegación, no cumplen los estrictos requisitos de <nav>, y<menu> son más apropiadas.

Nunca en mi carrera de desarrollo web encontré una situación en la que quisiera que mi barra de navegación fuera parte del esquema del documento.

— Nick Manning
fuente

1

Esto es incorrecto. Usted debe rara vez (o nunca) el uso <menu>de un sitio web que no es una aplicación web - 99% de las veces, el 'menú' de navegación será enlaces estáticos a otras páginas u otras secciones de la página, que es lo que <nav>es para, de acuerdo a la especificación.

— Ivan Durst

@IvanDurst, mi punto es que si está creando simplemente una lista de enlaces estáticos, navno es una buena opción de etiqueta porque naves un elemento de sección, por lo que se convertirá en parte del esquema del documento como si fuera una sección con un encabezado y contenido. De hecho, este es un escenario poco común en el que desea navque actúe como una sección. menufue solo una sugerencia como reemplazo semántico. No veo nada en la especificación que diga que no se puede usar de esta manera. Parece encajar. Pero si por alguna razón cree que el menú es solo para lo que define como una aplicación web, lo recomiendo olo ulcomo un reemplazo.

— Nick Manning

De acuerdo con la tabla de compatibilidad aquí , <menu>todavía tiene un soporte deficiente en este momento. (¿Es realmente cierto que Chrome no tiene soporte para él?) Además, puede lograr exactamente la misma semántica proporcionando el role="menu"atributo a otro elemento (por ejemplo, un div o nav). El atributo de rol anula la semántica predeterminada de cualquier elemento.

— brennanyoung