Accueil >Web >Référence HTML – éléments et attributs >summary – titre du bloc dépliable

summary – titre du bloc dépliable

<summary>intitulé du bloc</summary>

L’intitulé visible d’un bloc details. Un clic, Entrée ou Espace ouvre et ferme le bloc. Le navigateur dessine devant lui une flèche qui pivote à l’ouverture. Il doit être le premier enfant de details ; s’il manque, le navigateur ajoute le texte « Details » (ou sa traduction dans la langue du navigateur).

Affichage par défaut : display: list-item à l’intérieur de details (la flèche est son ::marker)
Balise de fermeture : obligatoire
Contenu : contenu phrasé, éventuellement un titre h1–h6
Où il peut figurer : details, comme premier enfant
Interface DOM : HTMLElement

Attributs

Uniquement les attributs globaux.

Exemples

Un plus personnalisé à la place de la flèche :

<details class="plus">
  <summary>Ingrédients</summary>
  <p>Farine de seigle, eau, sel, levain.</p>
</details>

.plus summary {
  list-style: none;
  cursor: pointer;
  font-weight: bold;
}
.plus summary::before {
  content: "+ ";
}

Résultat

+ Ingrédients

Farine de seigle, eau, sel, levain.

Accessibilité

Un titre dans summary (<summary><h3>…</h3></summary>) aide à naviguer par les titres, mais certains lecteurs d’écran ne lisent alors pas le titre comme faisant partie du bouton. Un texte ordinaire suffit généralement.

Points d’attention

Hors de details, l’élément summary n’a aucune fonction.
La flèche se supprime avec list-style: none – et dans Safari, en plus avec ::-webkit-details-marker.

Prise en charge par les navigateurs

Baseline – largement disponible : dans tous les navigateurs courants depuis janvier 2020, considéré comme largement disponible depuis juillet 2022. Depuis la version : Chrome 12, Firefox 49, Safari 6. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
details – bloc dépliable
button – bouton
h1–h6 – titres