Tag HTML <details>
Il tag <details> mostra informazioni aggiuntive che l'utente può aprire e visualizzare. Attributi ed esempi.
Il tag <details> è uno degli elementi HTML5. Crea un widget di rivelazione: un controllo interattivo che l'utente può aprire per mostrare contenuto aggiuntivo e chiudere di nuovo per nasconderlo. Per impostazione predefinita il contenuto rimane nascosto e il browser disegna un piccolo triangolo (il marcatore di rivelazione) che ruota per indicare lo stato aperto o chiuso.
Il primo figlio di <details> dovrebbe essere un elemento <summary>, che definisce l'etichetta visibile su cui l'utente fa clic per attivare il widget. Il <summary> è il controllo vero e proprio — il resto del contenuto all'interno di <details> è ciò che viene mostrato o nascosto. Se ometti <summary>, il browser fornisce un'etichetta predefinita come "Details".
Perché usare <details>
Il grande vantaggio di <details> è che offre un widget mostra/nascondi completamente funzionante senza alcun JavaScript. Il browser gestisce il comportamento di apertura/chiusura, il supporto da tastiera e l'accessibilità al posto tuo.
Casi d'uso comuni:
- Elenchi FAQ — ogni domanda è un
<summary>e la risposta viene rivelata al clic. - Rivelazione progressiva — nascondi impostazioni avanzate, testi legali lunghi o sezioni "continua a leggere" così la pagina rimane scorrevole.
- Accordion di fallback senza JS — poiché funziona senza scripting,
<details>è una base solida per gli accordion. Anche se il JavaScript non si carica, il contenuto è comunque raggiungibile.
Rispetto a un accordion JavaScript costruito manualmente, <details> richiede meno codice, è accessibile da tastiera e con screen reader in modo automatico, e si degrada agevolmente. Ricorri a un widget JS personalizzato solo quando hai bisogno di comportamenti che l'elemento nativo non può offrirti (ad esempio transizioni animate dell'altezza sull'intero contenuto).
Sintassi
Il tag <details> va in coppia. Il contenuto è scritto tra i tag di apertura (<details>) e di chiusura (</details>).
Esempio del tag HTML <details>:
Tag HTML <details>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<details>
<summary>Click to see details</summary>
<p>Detailed information is here.</p>
</details>
</body>
</html>Risultato
L'attributo open
Aggiungi l'attributo boolean open per far sì che il widget sia espanso al caricamento della pagina:
<details open>
<summary>What is HTML?</summary>
<p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>L'attributo open riflette lo stato corrente in tempo reale. Quando l'utente attiva il widget, il browser aggiunge o rimuove open sull'elemento in modo automatico — non devi gestirlo tu. Puoi anche attivarlo direttamente da script:
const details = document.querySelector('details');
details.open = true; // expand
details.open = false; // collapseLeggere details.open ti indica se il widget è attualmente aperto.
Esempio del tag HTML <details> inserito all'interno di un tag <form>:
Tag HTML <details>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="action_form.php" method="get">
<details>
<summary>Departure airport:</summary>
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Birmingham">
<option value="Cambridge">
<option value="Oxford">
<option value="Bangor">
</datalist>
<input type="submit" value="confirm" />
</details>
</form>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| open | open | Indica che le informazioni nel tag devono essere mostrate inizialmente in forma espansa. |
Il tag <details> supporta anche gli Attributi Globali e gli Attributi Evento.
Come stilizzare un tag HTML <details>
details {
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.5em;
}
summary {
font-weight: bold;
cursor: pointer;
}Stilizzare il marcatore di rivelazione
La maggior parte dei browser renderizza il triangolo di apertura/chiusura tramite lo pseudo-elemento ::marker sul <summary>. Per modificarlo o rimuoverlo, imposta list-style sul summary:
/* Remove the default triangle */
summary {
list-style: none;
}
/* Replace it with your own characters */
summary::marker {
content: "▶ ";
}
details[open] summary::marker {
content: "▼ ";
}I browser più vecchi basati su WebKit (versioni precedenti di Safari/Chrome) utilizzavano invece uno pseudo-elemento non standard summary::-webkit-details-marker. Per coprire quelli, nascondilo anch'esso:
summary::-webkit-details-marker {
display: none;
}L'evento toggle
L'elemento <details> genera un evento toggle ogni volta che si apre o si chiude. Questo è il punto di aggancio giusto per il caricamento lazy del contenuto, l'invio di analisi o la sincronizzazione dello stato dell'interfaccia:
const details = document.querySelector('details');
details.addEventListener('toggle', () => {
if (details.open) {
console.log('Opened');
} else {
console.log('Closed');
}
});L'evento si attiva dopo che lo stato è già cambiato, quindi details.open riflette il nuovo valore all'interno del gestore.
Accessibilità
L'accoppiamento nativo <details>/<summary> include l'accessibilità incorporata. I browser espongono il <summary> con un ruolo simile a quello di un pulsante e il <details> come group, comunicano lo stato espanso/compresso agli screen reader e rendono il summary focalizzabile e utilizzabile con Enter e Space. Questo è un motivo chiave per preferire l'elemento nativo rispetto a un accordion basato su script — si ottengono semantica corretta e supporto da tastiera gratuitamente, senza dover gestire aria-expanded manualmente.
Raggruppamento con l'attributo name
I browser moderni (Chrome 120+ e altri motori recenti) supportano un attributo name su <details>. Quando più elementi <details> condividono lo stesso name, si comportano come un gruppo esclusivo, come un accordion: aprirne uno chiude automaticamente gli altri.
<details name="faq" open>
<summary>Question one</summary>
<p>Answer one.</p>
</details>
<details name="faq">
<summary>Question two</summary>
<p>Answer two.</p>
</details>Poiché questa è una funzionalità più recente, i browser che non supportano name lo ignorano semplicemente e lasciano che ogni widget si apra in modo indipendente — un miglioramento progressivo sicuro.
Tag correlati
<summary>— l'etichetta visibile e il controllo per un widget<details>.<dialog>— una finestra di dialogo nativa modale o non modale, utile quando si ha bisogno di un overlay anziché di una rivelazione in linea.