Balise HTML <details>

La balise <details> est l'un des éléments HTML5. Elle crée un widget de divulgation : un contrôle interactif que l'utilisateur peut ouvrir pour révéler du contenu supplémentaire, puis fermer pour le masquer. Par défaut, le contenu reste caché et le navigateur affiche un petit triangle (le marqueur de divulgation) qui pivote pour indiquer l'état ouvert ou fermé.

Le premier enfant de <details> doit être un élément <summary>, qui définit l'étiquette visible sur laquelle l'utilisateur clique pour basculer le widget. Le <summary> est le contrôle effectif — le reste du contenu à l'intérieur de <details> est ce qui sera affiché ou masqué. Si vous omettez <summary>, le navigateur fournit une étiquette par défaut telle que « Details ».

Pourquoi utiliser <details>

Le grand avantage de <details> est qu'il vous offre un widget afficher/masquer entièrement fonctionnel sans aucun JavaScript. Le navigateur gère le comportement d'ouverture/fermeture, la prise en charge du clavier et l'accessibilité à votre place.

Cas d'utilisation courants :

Listes FAQ — chaque question est un <summary> et la réponse est révélée au clic.
Divulgation progressive — masquez les paramètres avancés, les textes juridiques longs ou les sections « lire la suite » pour que la page reste lisible d'un coup d'œil.
Repli accordéon sans JS — parce qu'il fonctionne sans script, <details> constitue une base robuste pour les accordéons. Même si votre JavaScript ne se charge pas, le contenu reste accessible.

Comparé à un accordéon JavaScript construit manuellement, <details> nécessite moins de code, est automatiquement accessible au clavier et aux lecteurs d'écran, et se dégrade gracieusement. N'ayez recours à un widget JS personnalisé que lorsque vous avez besoin d'un comportement que l'élément natif ne peut pas offrir (comme des transitions de hauteur animées sur tout le contenu, par exemple).

Syntaxe

La balise <details> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<details>) et fermante (</details>).

Exemple de la balise HTML `<details>` :

Balise HTML <details>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <details>
      <summary>Click to see details</summary>
      <p>Detailed information is here.</p>
    </details>
  </body>
</html>

Essayez vous-même »

Résultat

L'attribut `open`

Ajoutez l'attribut boolean open pour que le widget soit développé au chargement de la page :

<details open>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</details>

L'attribut open reflète l'état actuel en temps réel. Lorsque l'utilisateur bascule le widget, le navigateur ajoute ou supprime open sur l'élément automatiquement — vous n'avez pas à le gérer vous-même. Vous pouvez également le basculer depuis un script :

const details = document.querySelector('details');
details.open = true;   // expand
details.open = false;  // collapse

Lire details.open vous indique si le widget est actuellement ouvert.

Exemple de la balise HTML `<details>` placée à l'intérieur d'une balise `<form>` :

Balise HTML <details>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="action_form.php" method="get">
      <details>
        <summary>Departure airport:</summary>
        <input type="text" list="airports" name="airports" />
        <datalist id="airports">
          <option value="Birmingham">
          <option value="Cambridge">
          <option value="Oxford">
          <option value="Bangor">
        </datalist>
        <input type="submit" value="confirm" />
      </details>
    </form>
  </body>
</html>

Essayez vous-même »

Attributs

Attribut	Valeur	Description
open	open	Indique que les informations contenues dans la balise doivent initialement être affichées sous forme développée.

La balise <details> prend également en charge les attributs globaux et les attributs d'événement.

Comment styliser une balise HTML <details>

details {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5em;
}
summary {
  font-weight: bold;
  cursor: pointer;
}

Styliser le marqueur de divulgation

La plupart des navigateurs affichent le triangle ouvert/fermé via le pseudo-élément ::marker sur le <summary>. Pour le modifier ou le supprimer, définissez list-style sur le summary :

/* Remove the default triangle */
summary {
  list-style: none;
}

/* Replace it with your own characters */
summary::marker {
  content: "▶ ";
}
details[open] summary::marker {
  content: "▼ ";
}

Les anciens navigateurs basés sur WebKit (anciennes versions de Safari/Chrome) utilisaient un pseudo-élément non standard summary::-webkit-details-marker à la place. Pour les couvrir, masquez-le également :

summary::-webkit-details-marker {
  display: none;
}

L'événement `toggle`

L'élément <details> déclenche un événement toggle chaque fois qu'il s'ouvre ou se ferme. C'est le bon point d'accroche pour le chargement différé de contenu, l'envoi de données analytiques ou la synchronisation de l'état de l'interface :

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Opened');
  } else {
    console.log('Closed');
  }
});

L'événement se déclenche après que l'état a déjà changé, donc details.open reflète la nouvelle valeur à l'intérieur du gestionnaire.

Accessibilité

L'association native <details>/<summary> intègre l'accessibilité de base. Les navigateurs exposent le <summary> avec un rôle similaire à un bouton et le <details> en tant que group, annoncent l'état développé/réduit aux lecteurs d'écran, et rendent le summary focalisable et utilisable avec Entrée et Espace. C'est une raison essentielle de préférer l'élément natif à un accordéon scripté — vous obtenez une sémantique correcte et la prise en charge du clavier gratuitement, sans avoir à gérer aria-expanded vous-même.

Regroupement avec l'attribut `name`

Les navigateurs modernes (Chrome 120+ et autres moteurs récents) prennent en charge un attribut name sur <details>. Lorsque plusieurs éléments <details> partagent le même name, ils se comportent comme un groupe exclusif, à la manière d'un accordéon : l'ouverture de l'un ferme automatiquement les autres.

<details name="faq" open>
  <summary>Question one</summary>
  <p>Answer one.</p>
</details>
<details name="faq">
  <summary>Question two</summary>
  <p>Answer two.</p>
</details>

Comme il s'agit d'une fonctionnalité plus récente, les navigateurs qui ne prennent pas en charge name l'ignorent simplement et laissent chaque widget s'ouvrir indépendamment — une amélioration progressive sans risque.

Balises associées

<summary> — l'étiquette visible et le contrôle d'un widget <details>.
<dialog> — une boîte de dialogue native modale ou non modale, utile lorsque vous avez besoin d'une superposition plutôt que d'une divulgation en ligne.

Exercice

Pratique

Qu'est-ce qui est vrai concernant la balise HTML <details> ?

La balise <details> crée un widget de divulgation activé par un clic sur son élément <summary>.La balise <details> peut contenir des boutons et d'autres éléments HTML à l'intérieur.Ajouter l'attribut open rend le contenu de <details> visible par défaut.La balise <details> a besoin de JavaScript pour s'ouvrir et se fermer.