Découvrez le pouvoir de la balise HTML Details

Introduction

La balise HTML details fournit un moyen de fournir des détails supplémentaires et des informations sur n'importe quel en-tête ou texte. La balise <details> cache le texte qu'elle contient par défaut et affiche le texte uniquement lorsque l'utilisateur clique sur le bouton flèche. Dans ce laboratoire, nous allons apprendre à utiliser la balise HTML <details> avec un résumé personnalisé.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70738{{"Détails supplémentaires HTML"}} html/doc_flow -.-> lab-70738{{"Détails supplémentaires HTML"}} html/embed_media -.-> lab-70738{{"Détails supplémentaires HTML"}} html/inter_elems -.-> lab-70738{{"Détails supplémentaires HTML"}} end

Balise `<details>` de base

Créez un fichier index.html dans votre éditeur de texte préféré.

Copiez et collez le code suivant dans votre fichier index.html:

<details>
  <summary>Cliquez pour voir plus</summary>
  <p>Ce texte est caché et peut être vu en cliquant sur le bouton flèche.</p>
</details>

Il s'agit d'un exemple de base d'utilisation de la balise <details>. Le texte à l'intérieur de la balise <details> est caché par défaut et l'utilisateur peut afficher le texte en cliquant sur le bouton flèche.

Résumé personnalisé

Créons maintenant un résumé personnalisé pour la balise <details>. Modifions le code existant pour qu'il ressemble à ceci:

<details>
  <summary>Lire plus sur l'auteur</summary>
  <p>
    John Doe est un écrivain qui a publié de nombreux livres dans différents
    genres.
  </p>
</details>

Dans le code ci-dessus, nous avons ajouté un résumé personnalisé "Lire plus sur l'auteur" à l'aide de la balise <summary> et fourni les détails de l'auteur à l'intérieur de la balise <details>.

Ajouter une image

Ajoutons une image à la balise <details>. Copiez et collez le code suivant dans votre fichier index.html:

<details>
  <summary>Cliquez pour voir plus</summary>
  <p>Ce texte est caché et peut être vu en cliquant sur le bouton flèche.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

Dans le code ci-dessus, nous avons ajouté une image à l'aide de la balise <img>. Lorsque l'utilisateur clique sur le bouton flèche, l'image et le texte à l'intérieur de la balise <details> seront visibles.

Ajouter l'attribut `open`

Ajoutons maintenant l'attribut open à la balise <details> pour afficher le texte par défaut. Modifions le code existant pour qu'il ressemble à ceci:

<details open>
  <summary>Lire plus sur l'auteur</summary>
  <p>
    John Doe est un écrivain qui a publié de nombreux livres dans différents
    genres.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

L'attribut open de la balise <details> assure que le texte est visible sur la page web par défaut.

Résumé

Dans ce laboratoire, nous avons appris à utiliser la balise HTML <details> pour fournir des détails et des informations supplémentaires sur tout en-tête ou texte. Nous avons également appris à utiliser des résumés personnalisés et à ajouter des images dans la balise <details>.

Détails supplémentaires HTML