<nav> ou <menu> (HTML5)

102

W3Schools.com et je suis à peu près sûr que je me souviens avoir vu l'état de W3C.org qui <menu>devrait être utilisé pour les menus de la barre d'outils et la liste des commandes de contrôle de formulaire.

Alors, lequel dois-je utiliser pour mon menu principal? Nav, ou Menu? Est-ce que ça importe?

html menu standards nav Slipp D. Thompson
la source
38
Vous voudrez peut-être lire w3fools .
zzzzBov
Qu'est-ce qu'une «commande de contrôle de formulaire»?
Mads Skjern

Réponses:

162

navest utilisé pour les groupes de liens internes ( aéléments). En général, cela signifie que les liens doivent se déplacer vers des pages séparées ou modifier le contenu dans le cas d'une page AJAX. Attendez-vous à une sorte de changement de contenu lorsque vous cliquez sur un navélément.

menuest utilisée pour des groupes de commandes ( a, input, button). En général, cela signifie que les entrées doivent exécuter une fonction dans la page. Attendez-vous à une sorte d'interaction javascript lorsque vous cliquez sur un menuélément.

nav: la navigation pour le site.

menu: le menu d'une application Web.

zzzzBov
la source
8
Fait intéressant: la spécification permet d'imbriquer des <li>éléments directement sous une <menu>balise, sans avoir besoin d'une <ul>liste. La condition est que l <menu>' typeattribut s soit omis ou défini sur "toolbar". Voir la spécification de l' <li>élément et de l' <menu>élément .
tomekwi
Quelqu'un peut-il me désigner <menu>dans l'une des spécifications HTML5 du W3C? Je le trouve dans la version WHAT WG , mais pas dans le dernier brouillon HTML 5.3 du W3C .
Garret Wilson le
10

Voici un article sur HTML5Doctornav avec une section expliquant en quoi il est différent de menu(essentiellement, utilisez-le dans des applications réelles). On dirait que tu veux nav.

Su '
la source
1

Le meilleur endroit pour obtenir cette réponse est les standards HTML 5 eux-mêmes.

Le menu est défini dans HTML 5.1 2nd Edition .

Il, "... représente un groupe de commandes."


Nav est défini en HTML 5 .

C'est, "... une section d'une page qui renvoie à d'autres pages ou à des parties de la page: une section avec des liens de navigation."

Il y a des notes pour la navigation que je n'ai pas incluses mais que je pense importantes, mais je pense qu'il est préférable que vous obteniez la définition vous-même à partir des normes.

Les définitions marquées dans cet article comme la réponse sont presque correctes, mais contiennent des déclarations superflues qui rendent la réponse elle-même erronée.

Kevin
la source
0

<nav>est une section (comme <section>ou <article>) afin qu'elle apparaisse dans le plan de votre document HTML. Pour cette raison, j'utiliserais <menu>99% du temps. Pour moi, <nav>c'est un mélange entre <section>et <menu>, avec la restriction supplémentaire qui <nav>devrait être utilisée spécifiquement pour la navigation, alors que cela <menu>peut être pour tout ce qui pourrait être appelé un menu (y compris une barre de navigation). Ainsi, la plupart des barres de navigation, bien qu'il s'agisse de barres de navigation, ne répondent pas aux exigences strictes de <nav>et <menu>sont plus appropriées.

Je n'ai jamais dans ma carrière de développement Web trouvé une situation où je voulais que ma barre de navigation fasse partie du plan du document.

Nick Manning
la source
1
Ceci est une erreur. Vous devriez rarement (voire jamais) utiliser <menu>sur un site Web qui n'est pas une application Web - 99% du temps, votre `` menu '' de navigation sera des liens statiques vers d'autres pages ou d'autres sections de la page, ce qui <nav>est pour cela, selon aux spécifications.
Ivan Durst
@IvanDurst, mon point est que si vous créez simplement une liste de liens statiques, ce navn'est pas un bon choix de balise car il navs'agit d'un élément de section, il fera donc partie du plan du document comme s'il s'agissait d'une section avec un en-tête et un contenu. Il s'agit en fait d'un scénario rare où vous voulez que vous navagissiez comme une section. menuétait juste une suggestion comme un remplacement sémantique. Je ne vois rien dans la spécification indiquant qu'il ne peut pas être utilisé de cette manière. Semble convenir. Mais si, pour une raison quelconque, vous pensez que ce menu n'est que pour ce que vous définissez comme une application Web, alors je recommande olou ulen remplacement.
Nick Manning
Selon le tableau de compatibilité ici , a <menu>toujours un support médiocre pour le moment. (Est-il vraiment vrai que Chrome n'a pas de support pour cela ??) En outre, vous pouvez obtenir exactement la même sémantique en fournissant l' role="menu"attribut à un autre élément (par exemple un div ou un nav). L'attribut role remplace la sémantique par défaut de tout élément.
brennanyoung