Balise HTML `<details>`

La balise <details> est l'un des éléments HTML5. Elle crée un widget de divulgation et contient des informations supplémentaires que l'utilisateur peut ouvrir et consulter. Par défaut, le contenu de la balise n'est pas affiché. Pour afficher le contenu, vous devez ajouter l'attribut open. Un widget de divulgation est généralement présenté avec un petit triangle qui pivote (ou tourne) pour indiquer l'état ouvert/fermé.

La <summary> balise définit le titre visible qui, lorsqu'il est cliqué, ouvrira/fermera les informations supplémentaires. S'il n'y a pas d'en-tête, le navigateur affichera par défaut le texte « Plus de détails ».

Syntaxe

La balise <details> s'utilise par paire. Le contenu est écrit entre la balise d'ouverture (<details>) et la balise de fermeture (</details>).

Exemple de la balise HTML `<details>` :

Balise HTML <details>

html

<!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>

Try it Yourself »

Résultat

exemple de details

Exemple de la balise HTML `<details>` placée à l'intérieur d'une balise `<form>` :

Balise HTML <details>

html

<!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>

Try it Yourself »

Attributs

Attribut	Valeur	Description
open	open	Indique que les informations de la balise doivent être affichées par défaut sous forme développée.

La balise <details> prend également en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <details>

css

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

Vous pouvez également personnaliser le marqueur de divulgation à l'aide du pseudo-élément ::marker.

Pratique

Que peut-on dire de la balise HTML <details> ?

La balise HTML <details> génère une case à bascule lorsqu'on clique dessus.La balise HTML <details> peut contenir des boutons.La balise HTML <details> peut contenir des styles CSS.La balise HTML <details> ne peut contenir aucun autre élément HTML.

Balise HTML <details> ​

Syntaxe ​

Exemple de la balise HTML <details> : ​

Résultat ​

Exemple de la balise HTML <details> placée à l'intérieur d'une balise <form> : ​

Attributs ​