HTML La balise <summary>

Définition et utilisation La balise <summary>

LES BALISES HTML

La balise <summary> définit une position visible pour l'élément <details> . La rubrique peut être cliquée pour afficher/masquer les 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>

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>html5 demo</title>
	 <style>
	 summary{
	 background:#ADCA48;
	 }
	 </style>
	 </head>
	 <body>
	 <details open="open">
	 <summary>Menu General 1</summary>
	 <ul>
	 <li> <a href="">Sous menu 1</a></li>
	 <li> <a href="">Sous menu 2 </a></li>
	 </ul>
	 </details>
	 <details>
	 <summary>Menu General 2</summary>
	 <ul>
	 <li> <a href="">Sous menu 1</a></li>
	 <li> <a href="">Sous menu 2 </a></li>
	 </ul>
	 </details>
	 <p><b>Note:</b> La balise &lt;details&gt; n'est supportée
	que dans Chrome et Safari en Mac.</p>
	 </body>
	 </html>