Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
L'élément HTML <summary> représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément <details>. En cliquant sur l'élément <summary>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <details> parent.
Cet élément inclut uniquement les attributs universels.
Un élément <summary> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.
Un élément <summary> peut uniquement être utilisé comme le premier élément fils d'un élément <details>. Lorsque l'utilisateur·ice clique sur le résumé, l'élément <details> parent change d'état (affiché ou masqué) et un évènement toggle est envoyé à l'élément <details> (ce qui permet de détecter un changement d'état via un script).
Le contenu de l'élément <details> fournit la description accessible pour l'élément <summary>.
Si le premier enfant d'un élément <details> n'est pas un élément <summary>, l'agent utilisateur utilisera une chaîne de caractères par défaut (généralement « Détails ») comme libellé pour la boîte de révélation.
Conformément à la spécification HTML, le style par défaut pour les éléments <summary> inclut display: list-item. Cela permet de changer ou de supprimer l'icône affichée comme widget à côté du libellé, qui est généralement un triangle.
Vous pouvez aussi changer le style en display: block pour supprimer le triangle.
Voir la section Compatibilité des navigateurs pour plus de détails, car tous les navigateurs ne prennent pas encore en charge toutes les fonctionnalités de cet élément.
Pour les navigateurs basés sur WebKit, comme Safari, il est possible de contrôler l'affichage de l'icône via le pseudo-élément CSS non standard ::-webkit-details-marker. Pour supprimer le triangle, utilisez summary::-webkit-details-marker { display: none }.
Voici quelques exemples montrant l'utilisation de <summary>. Vous pouvez trouver d'autres exemples dans la documentation de l'élément <details>.
Un exemple simple montrant l'utilisation de <summary> dans un élément <details> :
Il est possible d'utiliser des titres au sein d'un résumé.
Il existe actuellement quelques problèmes d'espacement qui peuvent être corrigés à l'aide de CSS.
Attention : Le rôle attribué à l'élément <summary> varie selon les navigateurs. Certains lui attribuent encore par défaut le rôle button, ce qui supprime tous les rôles de ses enfants. Cette incohérence peut poser des problèmes aux utilisateur·ice·s de technologies d'assistance telles que les lecteurs d'écran (<h4> dans l'exemple précédent verra son rôle supprimé et ne sera pas traité comme un titre pour ces utilisateur·ice·s). Vous devez tester votre implémentation de <summary> sur plusieurs plateformes afin de garantir une prise en charge de l'accessibilité cohérente.
Cet exemple ajoute une certaine sémantique à l'élément <summary> pour indiquer que le libellé est important :
Le marqueur de l'élément <summary>, c'est-à-dire le triangle de révélation, peut être personnalisé avec CSS. Le marqueur peut être ciblé à l'aide du pseudo-élément ::marker, qui accepte la propriété abrégée list-style ainsi que ses propriétés détaillées, comme list-style-type. Cela permet de remplacer le triangle par une image (généralement avec list-style-image) ou une chaîne de caractères (y compris des émojis). Dans cet exemple, nous remplaçons le contenu d'un widget de révélation et supprimons l'icône d'un autre en appliquant list-style: none avant d'ajouter une icône personnalisée via du contenu généré.
Dans le premier widget de révélation, nous mettons en forme le ::marker, en modifiant la propriété content selon l'attribut [open] de l'élément <details>. Pour le second widget, nous supprimons le marqueur avec les propriétés list-style, puis nous ajoutons un contenu généré stylisé avec le pseudo-élément ::after. Nous incluons également des styles pour ::-webkit-details-marker afin de cibler Safari. Le sélecteur pour le pseudo-élément spécifique au navigateur est inclus dans une pseudo-classe :is() afin de ne pas invalider la liste des sélecteurs.
Le CSS inclut le sélecteur d'attribut [open], qui ne correspond que lorsque l'attribut open est présent (c'est-à-dire lorsque l'élément <details> est ouvert). Les pseudo-classes :first-of-type et :last-of-type ciblent respectivement le premier et le dernier élément du même type. Nous avons inclus le pseudo-élément préfixé -webkit- dans une pseudo-classe :is() car elle accepte une liste de sélecteurs tolérante : si le pseudo-élément préfixé est invalide dans un navigateur, tout le bloc de sélecteurs ne sera pas invalidé. Nous avons aussi utilisé la syntaxe imbriquée de CSS. Voir le module Sélecteurs CSS.
| Contenu phrasé ou un élément décrivant du contenu de titre. |
| Aucune, la balise ouvrante et la balise fermante sont obligatoires. |
| Un élément <details>. |
| Pas de rôle correspondant (angl.) |
| Aucun role autorisé. |
| HTMLElement |
| HTML # the-summary-element |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 25 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.