HTML <summary> Tag
Exemple
Utilisation de l'élément <summary> :
<details>
<summary>Centre Epcot</summary>
<p>Epcot est un parc à thème situé au Walt Disney World Resort, proposant des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des événements spéciaux saisonniers.</p>
</details> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La <summary> tag définit un en-tête visible pour l'élément <details> . L'en-tête peut être cliqué pour afficher ou masquer les détails.
Remarque : L'élément <summary> doit être le premier élément enfant de l'élément <details>.
Support des Navigateurs
Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'élément.
| Élément | |||||
|---|---|---|---|---|---|
| <summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Attributs Globaux
La <summary> tag prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La <summary> tag prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Utilisez CSS pour styliser <details> et <summary> :
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Centre Epcot</summary>
<p>Epcot est un parc à thème situé au Walt Disney World Resort, proposant des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des événements spéciaux saisonniers.</p>
</details>
</body>
</html> Pages Associées
Référence DOM HTML : Objet Summary
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <summary> avec les valeurs par défaut suivantes :
summary {
display: block;
}