Balise HTML <résumé>
Exemple
Utilisation de l'élément <summary> :
<details>
<summary>Epcot Center</summary>
<p>Epcot is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</details>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <summary>balise définit un en-tête visible pour l' élément <details> . L'en-tête peut être cliqué pour afficher/masquer les détails.
Remarque : L' <summary>élément doit être le premier élément enfant de l'élément <details>.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'élément.
| Element | |||||
|---|---|---|---|---|---|
| <summary> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Attributs globaux
La <summary>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <summary>balise 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>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney
World Resort featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
Pages connexes
Référence HTML DOM : objet de résumé
Paramètres CSS par défaut
La plupart des navigateurs afficheront l' <summary>élément avec les valeurs par défaut suivantes :
summary {
display: block;
}