Balise HTML `<summary>`

La balise <summary> est utilisée pour définir l'en-tête visible de l'élément <details>. En cliquant sur l'en-tête, l'utilisateur peut afficher/masquer les informations.

L'élément <summary> doit toujours être le premier élément à l'intérieur d'une balise <details>. Lorsque vous cliquez sur le résumé, l'élément parent <details> bascule entre ouvert et fermé. L'événement toggle est ensuite envoyé à <details>, ce qui peut vous informer du changement d'état. Vous pouvez écouter cet événement avec JavaScript :

document.querySelector('details').addEventListener('toggle', (e) => {
  console.log('Details is now', e.target.open ? 'open' : 'closed');
});

Si le premier enfant de l'élément <details> n'est pas un élément <summary>, une chaîne par défaut sera utilisée comme étiquette de la zone de divulgation.

Le style par défaut des balises <summary> contient la propriété CSS display avec la valeur « list-item », permettant de modifier l'icône affichée en tant que widget de divulgation. Si vous souhaitez supprimer le triangle de divulgation, vous pouvez utiliser display: block.

La balise <summary> fait partie des éléments HTML5.

Syntaxe

La balise <summary> s'utilise par paires. Le contenu est écrit entre les balises d'ouverture (<summary>) et de fermeture (</summary>).

Exemple de la balise HTML `<summary>` :

Balise HTML <summary>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Copyright 2013-2014.</summary>
      <p>W3docs. All rights reserved.</p>
      <p>The content of the website is the property of W3Docs.com.</p>
    </details>
  </body>
</html>

Try it Yourself »

Résultat

summary example

Attributs

La balise <summary> prend en charge les Attributs globaux et les Attributs d'événement.

Comment styliser une balise HTML <summary>

css

summary {
  color: blue;
  list-style: none; /* Hides the disclosure triangle */
}

Pratique

Quel est l'objectif de la balise <summary> en HTML ?

Elle est utilisée pour créer un résumé qui ne sera affiché dans un navigateur que si l'élément <details> est fermé.Elle fournit une assistance visuelle pour la navigation sur le site.Elle est utilisée pour spécifier des métadonnées dans la page web.Elle est utilisée conjointement avec la balise <details> pour permettre au contenu d'être soit réductible, soit développé selon la volonté de l'utilisateur.

Balise HTML <summary> ​

Syntaxe ​

Exemple de la balise HTML &lt;summary&gt; : ​

Résultat ​