Beispiel für das HTML Data Description Tag

Einführung

HTML bietet eine Reihe von Tags, mit denen Sie Definitionenlisten erstellen können, in denen Sie eine Liste von Begriffen definieren und für jeden von ihnen eine Beschreibung angeben können. Eines der Tags, das in diesen Listen verwendet wird, ist das <dd>-Tag (Data Description), das zur Angabe einer Beschreibung des Begriffes verwendet wird, der mithilfe des <dt>-Tags dargestellt wird. In diesem Lab werden Sie lernen, wie das <dd>-Tag verwendet wird.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) 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/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{{"HTML-Beschreibungswert"}} html/head_elems -.-> lab-70734{{"HTML-Beschreibungswert"}} html/lists_desc -.-> lab-70734{{"HTML-Beschreibungswert"}} html/doc_flow -.-> lab-70734{{"HTML-Beschreibungswert"}} html/multimedia -.-> lab-70734{{"HTML-Beschreibungswert"}} html/inter_elems -.-> lab-70734{{"HTML-Beschreibungswert"}} end

Erstellen einer Definitionenliste

Der erste Schritt besteht darin, eine Definitionenliste mit dem <dl>-Tag zu erstellen. Innerhalb dieses Tags müssen Sie mit dem <dt>-Tag einen oder mehrere Begriffe definieren. Beispielsweise erstellen Sie eine Definitionenliste mit zwei Begriffen: "HTML" und "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>

Verwenden des `<dd>`-Tags

Jetzt, nachdem Sie einige Begriffe mit dem <dt>-Tag definiert haben, können Sie für jeden Begriff eine Beschreibung mit dem <dd>-Tag geben. Fügen Sie die Beschreibungen jedes Begriffes wie folgt hinzu:

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>
        HTML steht für Hyper Text Markup Language. Es wird verwendet, um Inhalte
        im Web zu erstellen und zu strukturieren.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS steht für Cascading Style Sheets. Es wird verwendet, um
        HTML-Elemente zu gestalten und Webseiten optisch ansprechend zu
        gestalten.
      </dd>
    </dl>
  </body>
</html>

Gestalten der Definitionenliste

Standardmäßig wird das <dd>-Tag als Block angezeigt und eingerückt, was es einfacher macht, zwischen Begriffen und Beschreibungen zu unterscheiden. Sie können jedoch auch seinen Stil mit CSS anpassen. Fügen Sie die folgenden Stile Ihrem HTML-Code hinzu, um das Aussehen Ihrer Definitionenliste zu ändern:

<!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 steht für Hyper Text Markup Language. Es wird verwendet, um Inhalte
        im Web zu erstellen und zu strukturieren.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS steht für Cascading Style Sheets. Es wird verwendet, um
        HTML-Elemente zu gestalten und Webseiten optisch ansprechend zu
        gestalten.
      </dd>
    </dl>
  </body>
</html>

Verwenden des `<img>`-Tags innerhalb des `<dd>`-Tags

Sie können auch ein Bild zur Beschreibung des Begriffes mit dem <img>-Tag hinzufügen. Beispielsweise fügen wir ein Bild des HTML-Logos zur Beschreibung von HTML hinzu:

<!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 steht für Hyper Text Markup Language. Es wird verwendet, um Inhalte
        im Web zu erstellen und zu strukturieren.
      </dd>
      <dt>CSS</dt>
      <dd>
        CSS steht für Cascading Style Sheets. Es wird verwendet, um
        HTML-Elemente zu gestalten und Webseiten optisch ansprechend zu
        gestalten.
      </dd>
    </dl>
  </body>
</html>

Zusammenfassung

Das <dd>-Tag wird verwendet, um die Beschreibung eines mit dem <dt>-Tag definierten Begriffes innerhalb einer Definitionenliste bereitzustellen. Standardmäßig wird es als Block angezeigt und eingerückt, was es lesbarer macht. Sie können seinen Stil mit CSS anpassen und sogar mit dem <img>-Tag ein Bild hinzufügen.

HTML-Beschreibungswert