Tag HTML <menu>
Il tag HTML <menu> è un elemento valido del Living Standard che rappresenta una barra degli strumenti o un elenco di comandi, con esempi e differenze da <ul>.
Il tag <menu> rappresenta un elenco non ordinato di elementi, proprio come <ul>, ma con un significato semantico più specifico: descrive una barra degli strumenti o un elenco di comandi interattivi che l'utente può eseguire. Ogni elemento è scritto come un <li>.
L'elemento <menu> non è obsoleto. È un elemento corrente e valido nell'HTML Living Standard. I browser lo renderizzano allo stesso modo di un <ul> — come un elenco a blocchi con punti elenco — e ha lo stesso modello di contenuto. La differenza è puramente semantica: usa <menu> quando l'elenco rappresenta un insieme di comandi o controlli (ad esempio, una riga di pulsanti della barra degli strumenti), e usa <ul> per gli elenchi di contenuto ordinario.
Ciò che è stato rimosso dallo standard è la funzionalità del menu contestuale: gli attributi type="context", type="toolbar", type="popup" e label, insieme all'elemento <menuitem> associato. Questi non esistono più in nessun browser moderno. L'elemento <menu> rimane valido — sono stati rimossi solo quegli attributi aggiuntivi e <menuitem>. Per creare oggi un menu contestuale personalizzato, utilizza invece CSS e JavaScript.
Quando usare <menu>
- Usa
<ul>per gli elenchi di contenuto generico — link di navigazione, elenchi di funzionalità, passaggi o qualsiasi contenuto ordinario con punti elenco. Per la navigazione del sito, racchiudi quell'elenco in un elemento<nav>. - Ricorri a
<menu>solo quando l'intenzione semantica è una barra degli strumenti o un elenco di comandi, come un gruppo di pulsanti di azione (Taglia, Copia, Incolla) che operano sul documento o sulla selezione corrente.
Poiché le tecnologie assistive non espongono ancora <menu> in modo diverso da <ul>, il vantaggio pratico oggi è la leggibilità del markup per gli altri sviluppatori. Per l'accessibilità, fornisci alla barra degli strumenti dei comandi un aria-label descrittivo.
Sintassi
Il tag <menu> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<menu>) e di chiusura (</menu>).
Esempio del tag HTML <menu> con elementi <li>:
Esempio del tag HTML <menu>
Per impostazione predefinita, i browser renderizzano <menu> esattamente come un <ul> — come un elenco puntato. Gli stili qui sotto rimuovono semplicemente i punti elenco e aggiungono spaziatura.
<!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>Esempio di barra degli strumenti accessibile con <menu>:
Questo è il caso per cui <menu> è stato progettato: un elenco di comandi. I pulsanti sono veri elementi <button> (quindi sono accessibili da tastiera e annunciati come pulsanti), e la barra degli strumenti ha un aria-label in modo che gli utenti di screen reader sappiano cosa fa il gruppo.
<!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 differenza tra i tag <menu> e <ul>
Gli elementi <menu> e <ul> si comportano in modo identico nel browser: entrambi renderizzano un elenco non ordinato e contengono entrambi elementi <li>. L'unica differenza è l'intenzione semantica. <menu> segnala che l'elenco è una barra degli strumenti o un insieme di comandi, mentre <ul> è per gli elenchi di contenuto ordinario. In caso di dubbio, usa <ul> — è l'elemento più generale ed è universalmente compreso.
Attributi
L'elemento <menu> non ha attributi specifici dell'elemento. Il vecchio attributo type (con i valori context, toolbar e popup), label e l'elemento <menuitem> associato sono stati rimossi dallo standard e non funzionano più nei browser.
Il tag <menu> supporta gli Attributi globali e gli Attributi evento. Per una barra degli strumenti dei comandi, aggiungi un aria-label (un attributo globale) per descrivere il gruppo di comandi.