Gli ultimi tutorial di sviluppo web
 

HTML <details> Tag


Esempio

Utilizzando la <details> elemento:

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Prova tu stesso "

Definizione e utilizzo

I <details> tag specifica ulteriori dettagli che l'utente può visualizzare o nascondere su richiesta.

I <details> tag possono essere utilizzati per creare un widget interattivo che l'utente può aprire e chiudere. Qualsiasi tipo di contenuti può essere messo all'interno del <details> tag.

Il contenuto di un <details> elemento non deve essere visibile a meno che il open attributo è impostato.


Supporto per il browser

I numeri nella tabella indicano la prima versione del browser che supporta pienamente l'elemento.

Elemento
<details> 12.0 Non supportato 48.0 6.0 15.0

Differenze tra HTML 4.01 e HTML5

Il <details> tag è nuovo in HTML5.


Suggerimenti e Note

Suggerimento: il <summary> tag viene utilizzato per specificare un titolo visibile per i dettagli.Il titolo può essere cliccato per visualizzare / nascondere i dettagli.


attributi

= Nuovo in HTML5.

Attributo Valore Descrizione
open open Specifica che i dati dovrebbero essere visibili (aperto) per l'utente

attributi globali

Il <details> tag supporta anche l' Attributi globali in HTML .


Attributi eventi

Il <details> tag supporta anche l' evento Attributi in HTML .


Pagine correlate

Di riferimento DOM HTML: Details oggetto


Impostazioni predefinite CSS

La maggior parte dei browser visualizzare i <details> elemento con i seguenti valori di default:

details {
    display: block;
}