logo oujood
🔍

  HTML La balise <summary>

OUJOOD.COM

Définition et utilisation de la balise <summary>

LES BALISES HTML

La balise <summary> définit un titre visible et cliquable pour l'élément <details>. Ce titre peut être cliqué pour afficher/masquer le contenu des détails.

L'élément <summary> sert d'intitulé à l'élément <details>, en cela il doit être pertinent. Sa fonction s'apparente à une légende ou un titre donnant du sens au contenu de son parent.

Remarque : L'élément <summary> ne peut être l'enfant que de l'élément <details> et doit être son premier enfant.

Exemple de l'élément <summary>

Exemple :   📋 Copier le code 

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Exemple balise summary</title>
	<style>
	summary {
		background: #ADCA48;
		padding: 10px;
		cursor: pointer;
		border-radius: 4px;
		margin: 5px 0;
	}
	summary:hover {
		background: #9CB841;
	}
	details {
		border: 1px solid #ddd;
		margin: 10px 0;
		padding: 10px;
	}
	</style>
	</head>
	<body>
	<details open="open">
		<summary>Menu Général 1</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</summary>
		<ul>
			<li><a href="#">Sous menu 1</a></li>
			<li><a href="#">Sous menu 2</a></li>
		</ul>
	</details>
	
	<details>
		<summary>FAQ - Questions fréquentes</summary>
		<p><strong>Comment utiliser cette balise ?</strong></p>
		<p>La balise &lt;summary&gt; doit être placée comme premier enfant de &lt;details&gt;.</p>
	</details>
	
	<p><strong>Note :</strong> Les balises &lt;details&gt; et &lt;summary&gt; sont maintenant supportées par tous les navigateurs modernes.</p>
	</body>
	</html>

Support des navigateurs

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

La balise <summary> 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 <summary> est nouvelle en HTML5. Elle n'existait pas en HTML 4.01.

Remarque : L'élément <summary> doit toujours être le premier élément enfant de l'élément <details>.

Comportement par défaut

Aspect Comportement
Affichage par défaut L'élément s'affiche avec un indicateur visuel (triangle) pour montrer qu'il est cliquable
Interaction Cliquer sur le summary ouvre/ferme le contenu de details
Accessibilité Navigable au clavier (Entrée et Espace pour activer)
Position Doit être le premier enfant de <details>

Cas d'utilisation courants

Utilisations recommandées :
  • FAQ : Questions avec réponses masquables
  • Menus accordéon : Navigation hiérarchique
  • Sections de contenu : Chapitres ou parties d'article
  • Formulaires avancés : Options supplémentaires masquées
  • Documentation : Sections techniques détaillées

Bonnes pratiques

Recommandations :
  • Utilisez un texte descriptif et clair pour le summary
  • Évitez d'imbriquer des éléments interactifs dans summary
  • Testez l'accessibilité avec la navigation au clavier
  • Stylisez le summary pour indiquer qu'il est interactif
  • Considérez l'état ouvert/fermé dans votre design

Attributs globaux

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

Attributs d'événement

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

Retour à l'accueil du site

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