La balise HTML <menu>
La balise HTML <menu> est un élément valide du Living Standard représentant une barre d'outils ou une liste de commandes. Découvrez ses différences avec <ul>.
La balise <menu> représente une liste non ordonnée d'éléments, tout comme <ul>, mais avec une signification sémantique plus précise : elle décrit une barre d'outils ou une liste de commandes interactives que l'utilisateur peut exécuter. Chaque élément est écrit sous la forme d'un élément <li>.
L'élément <menu> n'est pas obsolète. C'est un élément actuel et valide du HTML Living Standard. Les navigateurs le rendent de la même façon qu'un <ul> — sous forme de liste à puces en bloc — et il possède le même modèle de contenu. La différence est purement sémantique : utilisez <menu> lorsque la liste est un ensemble de commandes ou de contrôles (par exemple, une rangée de boutons de barre d'outils), et <ul> pour les listes de contenu ordinaires.
Ce qui a été retiré de la norme, c'est la fonctionnalité de menu contextuel : les attributs type="context", type="toolbar", type="popup" et label, ainsi que l'élément <menuitem> associé. Ces éléments n'existent plus dans aucun navigateur moderne. L'élément <menu> lui-même reste valide — seuls ces attributs supplémentaires et <menuitem> ont été supprimés. Pour créer un menu contextuel personnalisé aujourd'hui, utilisez CSS et JavaScript à la place.
Quand utiliser <menu>
- Utilisez
<ul>pour les listes de contenu générales — liens de navigation, listes de fonctionnalités, étapes ou tout contenu à puces ordinaire. Pour la navigation du site, encapsulez cette liste dans un élément<nav>. - Optez pour
<menu>uniquement lorsque l'intention sémantique est une barre d'outils ou une liste de commandes, comme un groupe de boutons d'action (Couper, Copier, Coller) qui agissent sur le document ou la sélection courante.
Étant donné que les technologies d'assistance n'exposent pas encore <menu> différemment de <ul>, l'avantage pratique aujourd'hui est la lisibilité de votre balisage pour les autres développeurs. Pour l'accessibilité, donnez à une barre d'outils de commandes un aria-label descriptif.
Syntaxe
La balise <menu> va par paires. Le contenu est écrit entre les balises ouvrante (<menu>) et fermante (</menu>).
Exemple de la balise HTML <menu> avec des éléments <li> :
Exemple de balise HTML <menu>
Par défaut, les navigateurs rendent <menu> exactement comme un <ul> — sous forme de liste à puces. Les styles ci-dessous suppriment simplement les puces et ajoutent de l'espacement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: block;
list-style: none;
padding: 0;
}
menu li {
display: block;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
</style>
</head>
<body>
<menu>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>menu - menu list</li>
</menu>
</body>
</html>Exemple d'une barre d'outils accessible avec <menu> :
C'est le cas pour lequel <menu> a été conçu : une liste de commandes. Les boutons sont de vrais éléments <button> (ils sont donc accessibles au clavier et annoncés comme boutons), et la barre d'outils possède un aria-label afin que les utilisateurs de lecteurs d'écran sachent ce que fait le groupe.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
menu {
display: flex;
gap: 10px;
list-style: none;
padding: 10px;
margin: 0;
background: #f0f0f0;
border: 1px solid #ccc;
}
menu button {
padding: 8px 12px;
background: #1c87c9;
color: #fff;
border: none;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<menu aria-label="Text formatting">
<li><button type="button" onclick="alert('Bold')">Bold</button></li>
<li><button type="button" onclick="alert('Italic')">Italic</button></li>
<li><button type="button" onclick="alert('Underline')">Underline</button></li>
</menu>
</body>
</html>La différence entre les balises <menu> et <ul>
Les éléments <menu> et <ul> se comportent de manière identique dans le navigateur : tous deux affichent une liste non ordonnée et contiennent des éléments <li>. La seule différence est l'intention sémantique. <menu> signale que la liste est une barre d'outils ou un ensemble de commandes, tandis que <ul> est destiné aux listes de contenu ordinaires. En cas de doute, utilisez <ul> — c'est l'élément le plus général et il est universellement compris.
Attributs
L'élément <menu> n'a pas d'attributs spécifiques. L'ancien attribut type (avec les valeurs context, toolbar et popup), label, ainsi que l'élément <menuitem> associé ont été retirés de la norme et ne fonctionnent plus dans les navigateurs.
La balise <menu> prend en charge les attributs globaux et les attributs d'événements. Pour une barre d'outils de commandes, ajoutez un aria-label (un attribut global) pour décrire le groupe de commandes.