Accueil    HTML    Balise Details
 



balise details  Balise DETAILS : détail

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <details> permet de déclarer une section dont le titre est visible mais dont le contenu est masqué par défaut. Elle s'emploie pour par exemple regrouper des références à la fin d'un article que l'utilisateur peut visualiser s'il le souhaite.

Elle applique par défaut le titre "Détails" à la section qu'elle contient, mais il est possible de changer ce titre en employant la balise <summary>. De même, il est possible de rendre apparent par défaut le contenu en employant l'attribut "open".



Propriétés pour la balise details :




Propriétés Définition Valeurs
open Indique si la section details est ouverte par défaut open


Exemple d'utilisation de la balise details :




Section <details> sans mise en forme :

<details>
   <p>
      La balise <details> met le titre "Details" par défaut
      La balise <summary> permet de donner un titre à la section details
      La balise <details> est fermée par défaut
      L'attribut "open" permet de rendre le contenu visible par défaut
   </p>
</details>


Emploi de la balise <summary> pour donner un titre spécifique à la section

<details>
   <summary style="cursor:pointer;">Exemple de section details</summary>
   <p>
      La balise <details> met le titre "Details" par défaut
      La balise <summary> permet de donner un titre à la section details
      La balise <details> est fermée par défaut
      L'attribut "open" permet de rendre le contenu visible par défaut
   </p>
</details>


Emploi de l'attribut "open" pour rendre la section visible par défaut

<details open="open" style="padding-left:20px; border:dotted 1px black;">
   <summary style="cursor:pointer;">Exemple de section details</summary>
   <p>
      La balise <details> met le titre "Details" par défaut
      La balise <summary> permet de donner un titre à la section details
      La balise <details> est fermée par défaut
      L'attribut "open" permet de rendre le contenu visible par défaut
   </p>
</details>


Section <details> sans mise en forme :

La balise <details> met le titre "Details" par défaut
La balise <summary> permet de donner un titre à la section details
La balise <details> est fermée par défaut
L'attribut "open" permet de rendre le contenu visible par défaut




Emploi de la balise <summary> pour donner un titre spécifique à la section

Exemple de section details

La balise <details> met le titre "Details" par défaut
La balise <summary> permet de donner un titre à la section details
La balise <details> est fermée par défaut
L'attribut "open" permet de rendre le contenu visible par défaut




Emploi de l'attribut "open" pour rendre la section visible par défaut

Exemple de section details ouverte par défaut

La balise <details> met le titre "Details" par défaut
La balise <summary> permet de donner un titre à la section details
La balise <details> est fermée par défaut
L'attribut "open" permet de rendre le contenu visible par défaut