<summary>

Description

L’élément <summary> est le premier enfant obligatoire de <details>. Il fournit le titre ou résumé visible du bloc dépliable, cliquable par l’utilisateur pour révéler ou masquer le contenu. Il peut contenir du contenu inline enrichi (icônes, code, etc.).

Syntaxe

<details>
  <summary>Cliquer pour révéler</summary>
  <p>Contenu masqué.</p>
</details>

Exemples

Summary avec icône CSS :

<details>
  <summary>Afficher les détails techniques</summary>
  <dl>
    <dt>Version</dt>
    <dd>2.5.0</dd>
    <dt>Licence</dt>
    <dd>MIT</dd>
  </dl>
</details>

Avec du contenu formaté dans le summary :

<details>
  <summary>
    <strong>Question :</strong> Quelle est la différence entre <code>em</code> et <code>rem</code> ?
  </summary>
  <p><code>em</code> est relatif à la taille de police de l'élément parent ; <code>rem</code> est relatif à la racine (<code>:root</code>).</p>
</details>

Notes

<summary> doit être le premier enfant de <details> : si absent, le navigateur crée un summary générique (“Détails”). <summary> n’a de sens que comme enfant de <details>.

Le triangle natif : le navigateur ajoute un triangle/flèche devant le <summary>. Ce marqueur peut être stylisé ou supprimé via CSS : summary { list-style: none; } (ou summary::-webkit-details-marker { display: none; } pour WebKit).

role="button" implicite : <summary> a le comportement d’un bouton. Il reçoit le focus, est activable au clavier (Espace/Entrée) et est annoncé comme bouton par les lecteurs d’écran.