logo oujood
🔍

  HTML Balise details

OUJOOD.COM

Définition et utilisation de la balise <details>

LES BALISES HTML

La balise <details> spécifie que l'utilisateur peut afficher ou masquer des détails supplémentaires sur demande.

La balise <details> permet de créer un widget interactif que l'utilisateur peut ouvrir et fermer. Toute sorte de contenu peut être mise à l'intérieur de la balise <details>.

Le contenu d'un élément <details> n'est pas visible par défaut, sauf si l'attribut open est défini.

Exemple avec l'élément <details>

Exemple :   📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Exemple balise details</title>
<style>
details {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
}
summary {
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    background-color: #f5f5f5;
    border-radius: 3px;
}
summary:hover {
    background-color: #e9e9e9;
}
</style>
</head>
<body>
<details>
    <summary>Copyright 2025</summary>
    <p>Tous droits réservés.</p>
    <p>Tout le contenu et les graphiques sur ce site sont une propriété réservée.</p>
</details>

<details open>
    <summary>Informations techniques</summary>
    <ul>
        <li>Version HTML5</li>
        <li>Compatible tous navigateurs modernes</li>
        <li>Accessible au clavier</li>
    </ul>
</details>

<details>
    <summary>FAQ - Questions fréquentes</summary>
    <h4>Comment utiliser cette balise ?</h4>
    <p>Placez le contenu à masquer à l'intérieur de &lt;details&gt; et utilisez &lt;summary&gt; pour le titre.</p>
    <h4>Est-ce accessible ?</h4>
    <p>Oui, la balise &lt;details&gt; est nativement accessible et navigable au clavier.</p>
</details>

<p><strong>Note :</strong> La balise &lt;details&gt; est maintenant supportée par tous les navigateurs modernes.</p>
</body>
</html>

Support des navigateurs

Internet Explorer - Support partiel depuis Edge Firefox - Supporté depuis Firefox 49 Opera - Supporté depuis Opera 15 Google Chrome - Supporté depuis Chrome 12 Safari - Supporté depuis Safari 6

La balise <details> est maintenant prise en charge par tous les navigateurs modernes. Le support était initialement limité à Chrome et Safari, mais s'est étendu à Firefox, Opera et Edge.

Différences entre HTML 4.01 et HTML5

La balise <details> est nouvelle en HTML5. Elle n'existait pas en HTML 4.01.

astuce Astuce : La balise <summary> est utilisée pour spécifier un en-tête visible pour le contenu détaillé.

Ce titre peut être cliqué pour afficher/masquer les détails.

Ses attributs

Nouveau : Nouveauté HTML5.

Attribut Valeur Description
open Nouveau open Spécifie que les détails soient visibles (ouverts) à l'utilisateur

L'attribut open en détail

Définition et utilisation de l'attribut open

L'attribut open est un attribut booléen.

Lorsqu'il est présent, il indique que les détails doivent être visibles (ouverts) à l'utilisateur.

Syntaxe :

<details open>

Remarque : L'attribut open est un attribut booléen et peut être défini de plusieurs manières :
  • <details open>
  • <details open="open">
  • <details open="">

Exemple d'un élément <details> ouvert par défaut

Exemple :   📋 Copier le code 

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Exemple attribut open</title>
	<style>
	details {
	    border: 1px solid #ccc;
	    padding: 10px;
	    margin: 10px 0;
	    border-radius: 5px;
	}
	summary {
	    font-weight: bold;
	    cursor: pointer;
	    padding: 5px;
	    background-color: #ADCA48;
	    border-radius: 3px;
	}
	</style>
	</head>
	<body>
	<details open>
	    <summary>Menu Général 1 (ouvert par défaut)</summary>
	    <ul>
	        <li><a href="#">Sous menu 1</a></li>
	        <li><a href="#">Sous menu 2</a></li>
	        <li><a href="#">Sous menu 3</a></li>
	    </ul>
	</details>
	
	<details>
	    <summary>Menu Général 2 (fermé par défaut)</summary>
	    <ul>
	        <li><a href="#">Sous menu 1</a></li>
	        <li><a href="#">Sous menu 2</a></li>
	    </ul>
	</details>
	
	<p><strong>Note :</strong> La balise &lt;details&gt; est maintenant supportée par tous les navigateurs modernes.</p>
	</body>
	</html>

Support des navigateurs pour l'attribut open

Internet Explorer - Support partiel depuis Edge Firefox - Supporté depuis Firefox 49 Opera - Supporté depuis Opera 15 Google Chrome - Supporté depuis Chrome 12 Safari - Supporté depuis Safari 6

L'attribut open est supporté par tous les navigateurs qui supportent la balise <details>.

Cas d'utilisation et bonnes pratiques

Utilisations courantes :
  • FAQ : Questions avec réponses extensibles
  • Documentation : Sections techniques détaillées
  • Formulaires : Options avancées masquées
  • Navigation : Menus accordéon
  • Contenu long : Résumés avec détails
Bonnes pratiques :
  • Utilisez toujours <summary> comme premier enfant
  • Fournissez un titre descriptif dans summary
  • Testez l'accessibilité avec la navigation clavier
  • Évitez d'imbriquer trop de details
  • Considérez les performances avec beaucoup de contenu

Événements JavaScript

Événement toggle :

La balise <details> déclenche un événement toggle à chaque ouverture/fermeture :

document.querySelector('details').addEventListener('toggle', function(e) {
    if (e.target.open) {
        console.log('Détails ouverts');
    } else {
        console.log('Détails fermés');
    }
});

Attributs globaux

La balise <details> prend également en charge les attributs globaux HTML.

Attributs d'événement

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

Retour à l'accueil du site

 Par carabde 10 mars 2014 (mis à jour janvier 2025)