Menu HTML : choisir les bonnes balises et créer une navigation accessible
Pour créer un menu HTML de navigation, utilisez une balise <nav> contenant une liste <ul>, puis un lien <a> dans chaque élément <li>. Cette structure fonctionne sans JavaScript et reste exploitable sans mise en forme. Le CSS sert ensuite à disposer les liens horizontalement, à régler les espacements et à adapter l’affichage aux petits écrans.
La balise <menu>, malgré son nom, n’est pas le choix habituel pour la navigation principale d’un site. Voici les distinctions à connaître et une méthode concrète pour construire un menu fiable.
Choisir entre <nav>, <ul> et <menu>
Ces balises ne remplissent pas le même rôle. Certaines définissent une région de la page, d’autres organisent des éléments. Elles peuvent donc se compléter plutôt que se remplacer.
| Balise | Rôle | Usage conseillé |
|---|---|---|
| <nav> | Identifie une zone de navigation importante. | Navigation principale, sommaire ou navigation secondaire structurante. |
| <ul> | Regroupe des éléments sans ordre imposé. | Liste des destinations du menu, avec un <li> par entrée. |
| <menu> | Représente une liste non ordonnée, notamment adaptée à des commandes. | Groupe d’actions, par exemple des boutons d’édition. |
Pour un site vitrine, un blog ou une boutique, l’association <nav> et <ul> constitue une base claire. La première indique la fonction de la région aux technologies d’assistance ; la seconde rend explicite le regroupement des liens.
Réservez les liens aux déplacements vers une page ou une section. Pour déclencher une action, comme ouvrir un panneau ou appliquer un filtre, utilisez plutôt un bouton. Un élément <menu> peut regrouper de tels boutons, mais il ne crée pas automatiquement un menu déroulant et ne fournit pas son comportement interactif.
Construire un premier menu HTML fonctionnel
Voici un exemple à reproduire dans votre fichier HTML. Le code est affiché comme du texte pour que ses balises restent visibles. Les fragments précédés de # désignent des sections de la même page : chaque destination devra posséder l’identifiant correspondant.
<nav aria-label="Navigation principale"> <ul class="navigation"> <li><a href="#accueil">Accueil</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>
Chaque <li> contient une entrée distincte. L’attribut href du lien indique sa destination : ici, le lien Services mène à un élément portant id="services". Pour une navigation entre plusieurs pages, remplacez ces fragments par les adresses réelles de vos pages.
L’attribut aria-label nomme la zone de navigation. Il devient particulièrement utile lorsque la page contient plusieurs régions <nav>, par exemple une navigation principale et une navigation de pied de page. Donnez-leur alors des noms distincts.
Sur un menu reliant plusieurs pages, ajoutez aria-current="page" au lien qui correspond à la page affichée. Cela permet de signaler la position actuelle autrement que par une simple couleur. Ne placez pas cette indication sur tous les liens.
Passer du menu vertical au menu horizontal avec CSS
Sans CSS, la liste apparaît généralement à la verticale, avec des puces et des espacements définis par le navigateur. Ce comportement constitue une base fonctionnelle. Pour obtenir une barre de navigation, appliquez les règles suivantes dans votre feuille de style.
.navigation { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .navigation a { display: block; padding: 0.75rem 1rem; color: #17324d; text-decoration: underline; } .navigation a:hover { background: #edf2f7; } .navigation a:focus-visible { outline: 3px solid #17324d; outline-offset: 2px; } @media (max-width: 40rem) { .navigation { flex-direction: column; } }
La suppression des marges, des espacements internes et des puces uniformise le rendu initial. display: flex aligne les entrées, tandis que flex-wrap: wrap autorise leur retour à la ligne. La règle conditionnelle les empile lorsque la largeur disponible devient réduite.
Le seuil de 40rem est un point de départ, pas une norme universelle. Ajustez-le selon la longueur des libellés et l’espace réellement disponible. Un menu avec « Nos accompagnements professionnels » demandera davantage de place qu’un menu composé de mots courts.
Pensez votre navigation comme une superposition de strates : les destinations d’abord, leur organisation ensuite, l’apparence enfin. Si vous désactivez le CSS, les liens doivent rester compréhensibles ; si vous désactivez JavaScript, les destinations essentielles doivent rester accessibles. Cette lecture par couches aide à repérer une fragilité : un effet visuel ne devrait jamais être le seul moyen d’accéder à une rubrique.
Ajouter un sous-menu sans piéger la navigation
Un sous-menu correspond d’abord à une liste imbriquée. Placez cette seconde liste à l’intérieur du <li> parent, après son lien ou son bouton, et non comme un élément isolé entre deux entrées.
<li> <a href="#services">Services</a> <ul> <li><a href="#conseil">Conseil</a></li> <li><a href="#formation">Formation</a></li> </ul> </li>
Cette structure laisse les destinations visibles par défaut. Pour transformer la liste en panneau repliable, ajoutez un véritable bouton de commande. S’il existe aussi une page « Services », conservez son lien et placez un bouton séparé pour ouvrir les sous-rubriques : les deux fonctions restent ainsi distinctes.
Le bouton doit exposer son état avec aria-expanded="false" ou aria-expanded="true". L’attribut aria-controls peut désigner l’identifiant du panneau commandé. Votre JavaScript doit synchroniser l’état annoncé et la visibilité réelle, puis permettre une fermeture au clavier, notamment avec Échap, en gérant correctement le focus.
Évitez un sous-menu accessible uniquement au survol : cette interaction ne suffit ni sur écran tactile ni au clavier. Pour une navigation de site classique, n’ajoutez pas non plus role="menu" par réflexe. Ce rôle implique un modèle d’interaction spécifique, différent d’une simple liste de liens.
Vérifier la compatibilité et l’accessibilité avant publication
Les éléments <nav>, <ul>, <li> et <a> sont largement pris en charge par les navigateurs actuels. La balise <menu> bénéficie également d’une compatibilité large depuis juillet 2015 pour son usage courant de liste. Cela ne signifie pas que les anciennes fonctions expérimentales de menus contextuels sont utilisables partout.
La présence d’une balise reconnue ne garantit donc pas, à elle seule, le fonctionnement d’un composant interactif. Vérifiez séparément la structure HTML, les règles CSS et les comportements JavaScript.
- Parcourez le menu avec Tab et Maj + Tab : chaque commande doit être atteignable dans un ordre logique.
- Contrôlez le focus : un indicateur visible doit permettre de repérer le lien ou le bouton sélectionné.
- Testez les destinations : chaque fragment doit correspondre à un identifiant existant et chaque adresse doit être correcte.
- Réduisez la largeur et agrandissez le texte : les libellés ne doivent ni se chevaucher ni disparaître.
- Essayez plusieurs navigateurs : vérifiez notamment les panneaux repliables et les interactions tactiles.
Sur WordPress, testez aussi le résultat dans le thème actif : ses styles peuvent modifier les listes, les liens ou les espacements. Une navigation réussie n’est pas celle qui multiplie les effets, mais celle dont les destinations restent lisibles, prévisibles et accessibles dans toutes ces situations.