<menu> en HTML : la liste de commandes que peu de sites utilisent

Dans l'éditeur d'un site ou le tableau de bord d'une application, une barre d'outils propose souvent plusieurs actions les unes à côté des autres : enregistrer, imprimer, partager, dupliquer. Ce ne sont pas des liens vers d'autres pages et ce n'est pas non plus un contenu à lire, ce sont des commandes que l'utilisateur peut déclencher.

Le HTML propose une balise pensée pour ce cas précis, <menu>, qui se comporte comme une liste ordinaire mais annonce une intention différente : voici un ensemble d'actions, pas une liste d'informations.

Définition

<menu> regroupe une série d'éléments <li> représentant des commandes ou des actions disponibles pour l'utilisateur, plutôt que des éléments de contenu à lire. Historiquement pensée pour les menus contextuels du navigateur affichés au clic droit, elle a gardé ce rôle de conteneur pour des actions même si son usage pratique reste aujourd'hui assez rare sur le web courant.

Sur le plan du rendu, un navigateur affiche <menu> exactement comme une liste à puces classique : même retrait, même point devant chaque élément. La différence ne se voit donc jamais à l'écran, elle se lit dans le code source et dans ce que la balise communique aux outils qui l'analysent.

Syntaxe et attributs

Le modèle de contenu de <menu> est identique à celui d'une liste à puces : uniquement des éléments <li>, éventuellement accompagnés de scripts. Les anciens attributs type et label, prévus à l'origine pour décrire des menus contextuels natifs du navigateur, ont été retirés à la fois de la spécification et des navigateurs qui les avaient expérimentés : <menu> ne porte donc plus aucun attribut qui lui soit propre, seulement les attributs globaux valables sur n'importe quelle balise.

Une barre d'outils typique associe chaque commande à son raccourci clavier grâce à <kbd>, ce qui donne un balisage à la fois lisible et honnête sur ce que représente chaque ligne.

<menu>
  <li><button type="button">Enregistrer</button> <kbd>Ctrl+S</kbd></li>
  <li><button type="button">Imprimer</button> <kbd>Ctrl+P</kbd></li>
  <li><button type="button">Dupliquer</button></li>
</menu>

Différence avec une liste ordinaire

La question revient souvent : pourquoi ne pas simplement écrire une liste à puces classique et s'épargner une balise de plus ? La réponse tient en un mot, l'intention. Une liste classique dit « voici des éléments », <menu> dit « voici des actions que vous pouvez déclencher ».

Sémantique et accessibilité

Un piège classique consiste à croire que <menu> transforme automatiquement une liste en menu d'application, avec la navigation au clavier par flèches et l'annonce vocale qu'un lecteur d'écran ferait sur un vrai menu de logiciel. Ce n'est pas le cas : par défaut, les technologies d'assistance traitent <menu> comme une liste ordinaire, ni plus ni moins.

Cas d'usage aujourd'hui

L'usage réel de <menu> reste limité. Les navigateurs ont abandonné les menus contextuels natifs qu'elle devait autrefois décrire, et la grande majorité des sites continuent d'utiliser une simple liste à puces pour leurs barres d'outils. Là où elle garde un intérêt concret, c'est dans les composants réutilisables : un contrôle personnalisé bâti avec <template> peut exposer sa liste de commandes internes sous la forme d'un <menu>, ce qui rend le rôle de ce bloc explicite pour quiconque relit le code plus tard, vous y compris dans six mois.

En dehors de ce genre de composant, il reste parfaitement acceptable d'utiliser une liste à puces classique pour une barre d'outils simple : le gain sémantique de <menu> est réel mais modeste, et il ne remplace jamais le travail d'accessibilité qui reste à faire avec les rôles ARIA et la gestion du clavier.

Bonnes pratiques

• Réservez <menu> aux actions déclenchables comme enregistrer, supprimer ou partager, jamais aux liens de navigation vers d'autres pages, qui relèvent d'une balise de navigation associée à une liste classique.
• Gardez le texte de chaque <li> court et verbal, à l'image d'un bouton, plutôt que descriptif comme le serait un titre d'article.
• N'attendez aucun comportement clavier gratuit : ajoutez vous-même les rôles ARIA et la gestion du clavier si le menu doit se comporter comme un vrai menu d'application.

Questions fréquentes

Aucune par défaut : les deux s'affichent avec les mêmes puces et le même retrait dans tous les navigateurs actuels. La différence se joue uniquement dans le sens que la balise porte pour le code et pour les outils qui l'analysent, pas dans l'apparence visuelle de la page.

Non, ce cas relève d'une balise de navigation associée à une liste classique, puisqu'il s'agit de liens vers d'autres pages et non de commandes à déclencher. <menu> est réservé aux actions, comme une barre d'outils ou un menu de commandes, ce qui exclut par nature les menus de navigation principaux d'un site.

Non, ils ont disparu à la fois de la spécification HTML et des navigateurs qui les avaient un temps expérimentés, Firefox en tête. Un menu contextuel personnalisé se construit aujourd'hui avec du JavaScript et les rôles ARIA adaptés, pas avec ces anciens attributs devenus inertes.