I tag details e summary in HTML

I tag <details> e <summary> vengono usati nel codice HTML per inserire del testo che può essere visualizzato o nascosto dall’utente semplicemente cliccando o toccando il titolo della descrizione.

<details>
 <summary>Che cos'è l'HTML</summary>
<p>L'HTML è il linguaggio usato per creare i siti web e vengono letti dai browser per visualizzare la pagina a un utente</p>
</details>

Come si può notare, summary è un sotto elemento di details e indica il titolo da mostrare all’utente e che deve essere cliccato per visualizzare o nascondere le informazioni aggiuntive. Nel browser viene mostrato come sotto:

Che cos’è l’HTML

L’HTML è il linguaggio usato per creare i siti web e vengono letti dai browser per visualizzare la pagina a un utente

– Vedi anche: Come si scrive una pagina HTML

Il tag <details> ha un solo attributo principale, open, che serve a fare in modo che le informazioni contenute in questo elemento vengano visualizzate all’apertura della pagina web.

<details open>
 <summary>Che cos'è l'HTML</summary>
<p>L'HTML è il linguaggio usato per creare i siti web e vengono letti dai browser per visualizzare la pagina a un utente</p>
</details>

E’ possibile personalizzare gli elementi details e summary applicando le regole CSS ai seguenti selettori:

details > summary modifica lo stile del pulsante con il testo da cliccare. E’ possibile aggiungergli il bordo e un colore di sfondo;
details > p stabilisce come deve essere visto il testo aggiunto quando l’utente clicca sul titolo;

<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #8abef1;
  border: solid 1px;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #8abef1;
  padding: 4px;
  margin: 0; <!--è importante-->
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
</head>
<body>

<h1>Il linguaggio HTML</h1>

<details>
  <summary>Che cos'è l'HTML?</summary>
  <p>L'HTML è il linguaggio usato per creare i siti web e vengono letti dai browser per visualizzare la pagina a un utente.</p>
</details>

</body>
</html>