HTML Data Description Tag Example

Introduction

HTML provides a set of tags that allows you to create definitions lists, where you can define a list of terms and provide a description for each of them. One of the tags used in these lists is the <dd> (data description) tag which is used to provide a description of the term, represented using the <dt> tag. In this lab, you will learn how to use the <dd> tag.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") subgraph Lab Skills html/basic_elems -.-> lab-70734{{"`HTML Description Value`"}} html/head_elems -.-> lab-70734{{"`HTML Description Value`"}} html/lists_desc -.-> lab-70734{{"`HTML Description Value`"}} end

Creating a Definition List

The first step is to create a definition list with <dl> tag. Within this tag, you will have to define one or more terms with the <dt> tag. For example, create a definition list with two terms: "HTML" and "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>

Using `<dd>` Tag

Now that you have defined some terms using <dt> tag, you can provide a description of each term using <dd> tag. Add the descriptions of each term as shown below:

<!doctype html>
<html>
  <head>
    <title>HTML Data Description Tag Example</title>
  </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>

Styling the Definition List

By default, the <dd> tag will be displayed as a block and indented, making it easier to distinguish between terms and descriptions. However, you can also adjust its style using CSS. Add the following styles to your HTML code to modify the appearance of your definition list:

<!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>

Using `<img>` Tag within `<dd>` Tag

You can also add an image to the description of the term using <img> tag. For example, let's add an image of the HTML logo to the description of 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>

Summary

The <dd> tag is used to provide the description of a term, defined using the <dt> tag, within a definition list. By default, it is displayed as a block and indented, making it easier to read. You can adjust its style using CSS and even add an image to it using the <img> tag.

HTML Description Value