Balise <summary> HTML

Définition et utilisation

<summary> Balise <details> élément Définit un titre visible. Cliquez sur le titre pour afficher/cacher les détails.

Remarque :<summary> L'élément devrait être <details> élément le premier élément fils.

Veuillez également consulter :

Guide de référence HTML DOM :Objet résumé

Exemple

Exemple 1

Utiliser <summary> Élément :

<details>
  <summary>Centre du Monde de demain (Epcot Center)</summary>
  <p>Epcot est un parc à thèmes du complexe Walt Disney World Resort, avec des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des activités saisonnières.</p>
</details>

Essayez-le vous-même

Exemple 2

Utiliser CSS pour configurer <details> et <summary> le style :

<html>
<style>
details > summary {
  padding: 4px;
  largeur: 200px;
  couleur de fond: #eeeeee;
  bordure: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  curseur: pointeur;
}
details > p {
  couleur de fond: #eeeeee;
  padding: 4px;
  marge: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Centre du Monde de demain (Epcot Center)</summary>
  <p>Epcot est un parc à thèmes du complexe Walt Disney World Resort, avec des attractions passionnantes, des pavillons internationaux, des feux d'artifice primés et des activités saisonnières.</p>
</details>
</body>
</html>

Essayez-le vous-même

Attributs globaux

<summary> La balise prend également en charge Attributs globaux dans HTML.

Attributs d'événement

<summary> La balise prend également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <summary> Élément :

summary {
  display: block;
}

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0