Tag HTML <details>

Le tag <details> contient des détails supplémentaires que l'utilisateur peut ouvrir et voir à sa guise. Le contenu du tag n’est pas montré par défaut. Pour afficher le contenu, on doit utiliser l’attributopen.

Le tag <summary> définit un titre visible lorsque vous cliquez dessus, ce qui ouvrira/fermera des informations supplémentaires. S'il n'y a pas de titre, le navigateur affichera par défaut le titre "Plus de détails".

Syntaxe

Le tag <details> est apparié; le contenu est écrit entre le tag ouvrant (<details>) et le tag fermant (</details>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <details>
      <summary>Cliquez pour les détails.</summary>
      <p>Plus d'information ici.</p>
    </details>
  </body>
</html>

Résultat

Attributs

Attribut Valeur Description
open open Indique que les informations dans le tag doivent initialement être affichées sous forme développée.

Le tag <details> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <details> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <details>:

Coloration du texte dans le tag HTML <details>:

Styles de mise en page du texte pour la tag HTML <details>:

Autres propriétés utiles pour le tag HTML <details>:


Support de Navigateurs

12+ 49+ 6+ 15+


Trouvez-vous cela utile?

Articles Associées