<nav> ou <menu> (HTML5)

102

W3Schools.com e tenho certeza que me lembro de ter visto o estado W3C.org que <menu>deve ser usado para menus da barra de ferramentas e comandos de controle de formulário de listagem.

Então, qual devo usar no meu menu principal? Nav, ou Menu? Isso importa?

— Slipp D. Thompson
fonte

38

Você pode querer ler w3fools .

— zzzzBov

O que é um 'comando de controle de formulário'?

— Mads Skjern

162

navé usado para grupos de links internos ( aelementos). Geralmente, isso significa que os links devem viajar para páginas separadas ou alterar o conteúdo no caso de uma página AJAX. Espere algum tipo de mudança de conteúdo ao clicar em um navitem.

menué usado para os grupos de controlo ( a, input, button). Geralmente, isso significa que as entradas devem executar uma função dentro da página. Espere algum tipo de interação de javascript ao clicar em um menuitem.

nav: a navegação pelo site.

menu: o menu de um aplicativo da web.

— zzzzBov
fonte

8

Fato interessante: A especificação permite aninhar <li>elementos diretamente sob uma <menu>tag, sem a necessidade de uma <ul>lista. A exigência é que o <menu>'s typeatributo é omitido ou definido como "toolbar". Veja a especificação do <li>elemento e do <menu>elemento .

— tomekwi

Alguém pode me apontar <menu>em uma das especificações W3C HTML5? Estou encontrando na versão WHAT WG , mas não no último rascunho do W3C HTML 5.3 .

— Garret Wilson

10

Aqui está uma postagem do HTML5Doctornav com uma seção sobre como ele é diferente menu(basicamente, use-o em aplicativos reais). Parece que você quer nav.

— Su '
fonte

1

Com <menu>ele é geralmente usado para menus de contexto.

O MDN tem uma boa documentação sobre ele: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

— Jack
fonte

1

O melhor lugar para obter essa resposta são os próprios padrões do HTML 5.

O menu é definido em HTML 5.1 2ª edição .

Ele, "... representa um grupo de comandos."

Nav é definido em HTML 5 .

É, "... uma seção de uma página com links para outras páginas ou para partes da página: uma seção com links de navegação."

Há notas para navegação que não incluí, mas acho que são importantes, mas acho que é melhor você mesmo obter a definição dos padrões.

As definições marcadas neste post como a resposta estão quase corretas, mas contêm afirmações estranhas que tornam a própria resposta errada.

— kevin
fonte

0

<nav>é uma seção (como <section>ou <article>) para que apareça no esboço do documento HTML. Devido a isso, eu usaria <menu>99% do tempo. Para mim, <nav>é uma mistura entre <section>e <menu>, com a constrição adicional que <nav>deve ser usada especificamente para navegação, enquanto <menu>pode ser para qualquer coisa que possa ser chamada de menu (incluindo uma barra de navegação). Portanto, a maioria das barras de navegação, apesar de serem barras de navegação, não se enquadram nos requisitos estritos <nav>e <menu>são mais adequadas.

Nunca, em minha carreira de desenvolvimento web, encontrei uma situação em que desejasse que minha barra de navegação fizesse parte do esboço do documento.

— Nick Manning
fonte

1

Isso está incorreto. Você raramente (ou nunca) deve usar <menu>em um site que não seja um aplicativo da web - 99% do tempo, seu 'menu' de navegação será links estáticos para outras páginas ou outras seções da página, que <nav>é para isso, de acordo para a especificação.

— Ivan Durst

@IvanDurst, meu ponto é que se você estiver construindo simplesmente uma lista de links estáticos, navnão é uma boa escolha de tag porque navé um elemento de seção, portanto, se tornará parte do esboço do documento como se fosse uma seção com um cabeçalho e conteúdo. Na verdade, esse é um cenário raro em que você deseja navque aja como uma seção. menufoi apenas uma sugestão como uma substituição semântica. Não vejo nada nas especificações dizendo que não pode ser usado dessa forma. Parece se encaixar. Mas se você, por algum motivo, acredita que o menu é apenas para o que você define como um aplicativo da web, eu recomendo olou ulcomo um substituto.

— Nick Manning

De acordo com a tabela de compatibilidade aqui , <menu>ainda tem suporte ruim no momento. (É realmente verdade que o Chrome não tem suporte para isso ??) Além disso, você pode obter exatamente a mesma semântica fornecendo o role="menu"atributo a outro elemento (por exemplo, um div ou um nav). O atributo role substitui a semântica padrão para qualquer elemento.

— brennanyoung