Exemple d'étiquette de description de données HTML

Introduction

HTML fournit un ensemble d'étiquettes qui vous permettent de créer des listes de définitions, où vous pouvez définir une liste de termes et fournir une description pour chacun d'entre eux. L'une des étiquettes utilisées dans ces listes est l'étiquette <dd> (description de données) qui est utilisée pour fournir une description du terme, représenté à l'aide de l'étiquette <dt>. Dans ce laboratoire, vous allez apprendre à utiliser l'étiquette <dd>.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer 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/TextContentandFormattingGroup(["Text Content and Formatting"]) 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/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70734{{"Valeur de description HTML"}} html/head_elems -.-> lab-70734{{"Valeur de description HTML"}} html/lists_desc -.-> lab-70734{{"Valeur de description HTML"}} html/doc_flow -.-> lab-70734{{"Valeur de description HTML"}} html/multimedia -.-> lab-70734{{"Valeur de description HTML"}} html/inter_elems -.-> lab-70734{{"Valeur de description HTML"}} end

Création d'une liste de définitions

La première étape consiste à créer une liste de définitions avec l'étiquette <dl>. Dans cette étiquette, vous devrez définir un ou plusieurs termes avec l'étiquette <dt>. Par exemple, créez une liste de définitions avec deux termes : "HTML" et "CSS".

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>Description of HTML</dd>
      <dt>CSS</dt>
      <dd>Description of CSS</dd>
    </dl>
  </body>
</html>

Utilisation de l'étiquette `<dd>`

Maintenant que vous avez défini certains termes à l'aide de l'étiquette <dt>, vous pouvez fournir une description de chaque terme à l'aide de l'étiquette <dd>. Ajoutez les descriptions de chaque terme comme indiqué ci-dessous :

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML signifie Hyper Text Markup Language. Il est utilisé pour créer et
        structurer le contenu sur le web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS signifie Cascading Style Sheets. Il est utilisé pour styliser les
        éléments HTML et rendre les pages web visuellement attrayantes.
      </dd>
    </dl>
  </body>
</html>

Stylisation de la liste de définitions

Par défaut, l'étiquette <dd> sera affichée en tant que bloc et indentée, ce qui la rend plus facile à distinguer des termes et des descriptions. Cependant, vous pouvez également ajuster son style à l'aide de CSS. Ajoutez les styles suivants à votre code HTML pour modifier l'apparence de votre liste de définitions :

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

Utilisation de l'étiquette `<img>` à l'intérieur de l'étiquette `<dd>`

Vous pouvez également ajouter une image à la description du terme à l'aide de l'étiquette <img>. Par exemple, ajoutons une image du logo HTML à la description de HTML :

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
    <style>
      dd {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        <img
          src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"
          alt="HTML5 Logo"
        />
        HTML stands for Hyper Text Markup Language. It is used to create and
        structure content on the web.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS stands for Cascading Style Sheets. It is used to style HTML elements
        and make web pages look visually appealing.
      </dd>
    </dl>
  </body>
</html>

Sommaire

L'étiquette <dd> est utilisée pour fournir la description d'un terme, défini à l'aide de l'étiquette <dt>, dans une liste de définitions. Par défaut, elle est affichée en tant que bloc et indentée, ce qui la rend plus facile à lire. Vous pouvez ajuster son style à l'aide de CSS et même y ajouter une image à l'aide de l'étiquette <img>.

Valeur de description HTML