Accueil    HTML    Balise Summary
 



balise summary  Balise SUMMARY : titre de la section details

«  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 <summary> permet de donner un titre spécifique à une section <details> (proposant un contenu masqué par défaut et consultable en cliquant sur le titre de la section).

il est possible de mettre en forme le titre avec différents styles css dont par exemple le curseur de type "pointer" pour indiquer clairement à l'utilisateur que le titre est cliquable.



Exemple d'utilisation de la balise summary :




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

<details style="margin-left:20px; border:dotted 1px grey;">
   <summary style="cursor:pointer; color:firebrick; background-color:#ededed; border-bottom:dashed 1px black;">Exemple de section details</summary>
   <p style="padding-left:10px;">
      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>

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



Avec l'attribut open de la balise <details> spécifié :

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