Comment utiliser la liste de description en HTML ?

Comment Utiliser La Liste De Description En Html



La liste de description fournit une manière sémantique de structurer et de présenter des informations créant une relation entre les termes et leurs descriptions correspondantes. Cela rend les données ou les informations plus accessibles et compréhensibles. Les créateurs peuvent utiliser des listes de description dans des endroits tels que des glossaires, des dictionnaires, des sections FAQ, des spécifications de produit, etc. Cet article explique la procédure d'utilisation d'une liste de description en HTML.

Comment utiliser la liste de description en HTML ?

La liste de description se compose de '

”, “
', et ' ” balises et il est utilisé pour représenter une collection de termes et leurs définitions correspondantes. Il présente/affiche le contenu sous une forme structurée dans laquelle la description va au-delà d'une simple liste à puces. Les propriétés CSS peuvent également être appliquées à la liste de description pour créer une interface visuellement attrayante.







Visitez l'extrait de code ci-dessous pour créer une liste de description en HTML :



< corps >
< div >
< h2 > Parts de marché des ordinateurs portables h2 >
< dl >
< dt > CV dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 30 % jj >
< dt > Dell dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 24 % jj >
< dt > Lenovo dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 14 % jj >
dl >
div >
corps >


L'explication de l'extrait de code ci-dessus :



    • Au début, le parent ' div ” a été créé et agit comme un conteneur pour l'élément de liste de description et d'autres éléments HTML tels que “

      ”.

    • Ensuite, la liste de description '
      ” est utilisée pour configurer l'environnement de la liste de description.
    • Ensuite, le nom/terme de la description '
      La balise ” est utilisée pour définir la description des éléments dont la description va être ajoutée.
    • Après cela, les données de description ' La balise ” est insérée et contient la description/les informations relatives à l'élément de description.

Après la fin de la phase de compilation, les éléments HTML apparaissent sur la page Web comme ceci :






La sortie indique que la liste de description a été générée.

Exemple 1 : Attribuer plusieurs descriptions à un seul terme



La table de description peut être créée dans laquelle il y a plus d'une description pour un seul terme. Cela peut être particulièrement utile s'il existe plus d'une signification ou méthode par laquelle le terme descriptif peut être expliqué.

Le code du scénario ci-dessus est illustré ci-dessous :

< div >
< h2 > Parts de marché des ordinateurs portables h2 >
< dl >
< dt > CV dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 30 % dans 2018 jj >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 23 % dans 2017 jj >
< dt > Dell dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 24 % dans 2018 jj >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 27 % dans 2017 jj >
< dt > Lenovo dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 14 % dans 2018 et 9 % dans 2017 jj >
dl >
div >


Dans le code ci-dessus :

    • Tout d'abord, la liste de description est créée à l'aide de ' dl ”, “ dt ' et ' jj ' éléments.
    • Ensuite, plusieurs ' ' les balises sont utilisées sous un seul ' dt ' élément. Il attribue plusieurs descriptions à un même terme.

Après la phase de compilation :


La sortie montre que plusieurs descriptions ont été ajoutées pour un seul terme.

Exemple 2 : Attribuer plusieurs termes à une seule description

Les développeurs peuvent également créer une liste de description composée de plusieurs termes de description avec des données de description uniques. Il est particulièrement utile lorsque plusieurs termes sont similaires ou ont la même fonctionnalité. En utilisant cette technique, tous ces termes peuvent être décrits à la fois :

< div style = 'marge : 20px' >
< h2 > Parts de marché des ordinateurs portables h2 >
< dl >
< dt > CV dt >
< dt > EliteBook dt >
< dt > proRéserver dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 30 % dans 2018 jj >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 23 % dans 2017 jj >
< dt > Lenovo dt >
< jj > Dans la catégorie des systèmes de bureau et des ordinateurs portables, il y a une part de 14 % dans 2018 et 9 % dans 2017 jj >
dl >
div >


Dans le bloc de code ci-dessus, la liste de description est créée et plusieurs '

Les balises ' sont utilisées avec un seul ' ' étiqueter.

Après la fin de la phase de compilation :


L'instantané ci-dessus montre que plusieurs termes sont associés à des données de description uniques.

Conclusion

La liste de description est créée à l'aide de la liste de description '

” tag qui crée le conteneur pour les éléments de la liste et leur description. Par ailleurs, le «
” indique le nom de l'élément dont la description va être fournie. Tandis que le ' ” tag stocke la description correspondante. Cet article a démontré l'utilisation d'une liste de description en HTML.