HTML Balise details

Somaire

Définition et utilisation 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 open et fermer. Toute sorte de contenu peut être mis à l'intérieur de la balise <details>.

Le contenu d'un élément <details> ne doit pas être visible, sauf si l'attribut ouvert est défini.

Exemple Avec l'élément <details> :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
 <title>html5 demo</title>
 </head>
 <body>
 <details>
 <details>
 <summary>Copyright 2010.</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>
 <p><b>Note:</b> La balise &lt;details&gt; n'est supportée
que dans Chrome et Safari en Mac.</p>
 </body>
 </html>     

Appui de navigateur

Internet Explorer Firefox Opera  Google Chrome  Safari

La balise <details> est actuellement pris en charge uniquement en Chrome et Safari sur Mac.

Différences entre HTML 4.01 et HTML5

La balise <details> est Nouveau en HTML5.

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

La rubrique peut être cliquée pour afficher/masquer les détails.

Ses attributs

Nouveau : Nouveauté HTML5.

Attribut

Valeur

Description

open Nouveau

Ouvrez

Spécifie que les détails soient visible (ouvert) à l'utilisateur

HTML L’attribut open

Définition et utilisation attribut open

L'attribut open est un attribut booléen.

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

Syntaxe

<details open="open">

Remarque : L'attribut open est un attribut booléen et peut être définie de la manière suivante :
<détails open >
< détails open = " open " >
< détails opent = "" >

Exemple Un élément visible et ouvert <details> :

Sélectionner le code

	<!DOCTYPE html>
	 <html lang="fr">
	 <head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	 <title>html5 demo</title>
	 </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> 
	 

Appui de navigateur

Internet Explorer Firefox Opera  Google Chrome  Safari

L'attribut open est actuellement supporté seulement en Chrome.

Attributs globaux

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

Attributs de l'événement

La balise <details> prend également en charge les Attributs de l'événement au format HTML.


Retour à l'accueil du site

Par carabde 10 mars 2014