HTML - <dl> Tag



The HTML <dl> tag is used to create description list. These lists are also useful for representing metadata as a list of key and value pairs.

This encloses a list of words specified using the <dt> tag for the term and the <dd> element for the description. The <dt> tag defines a data term, while the <dd> tag defines a data description. Description lists are also useful for representing metadata as a key and value pairs. Unlike other lists, each item in a description list has two entries: a term and a description.

Syntax

Following is the syntax of the HTML <dl> tag −

<dl>
   <dt></dt>
   <dd></dd>
   .
</dl>

Example: Creating Description list Item

The following examples will illustrate the usage of the HTML <dl> tag, including where, when, and how to use it. In the example below, we create a description list using the <dl> tag, which contains a term (<dt>) and a description (<dd>) −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dl Tag</title>
</head>
<body>
   <!--create a description list-->
   <dl>
      <dt>HTML</dt>
      <dd>
         HTML stands for Hyper Text Markup Language.
      </dd>
   </dl>
</body>
</html>

Example: Multiple Description list Item

The following is another example of a <dl> tag. Here, we are create a description list using the <dl> tag, which contains a single term <dt> and multiple descriptions <dd> −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dl Tag</title>
</head>
<body>
   <!--create a description list-->
   <dl>
      <dt>CSS</dt>
      <dd>
         CSS stands for Cascading Style Sheet.
      </dd>
      <dd>
         It is used to define styles for the web pages.
      </dd>
      <dd>
         CSS types − Inline, Internal, External
      </dd>
   </dl>
</body>
</html>

Example: Multiple Description with Multiple dd

The following HTML program demonstrates the creation of a description list using the <dl> tag, which contains multiple data terms <dt> with their corresponding data descriptions <dd> −

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dl Tag</title>
</head>
<body>
   <!--create a description list-->
   <dl>
      <dt>Name</dt>
      <dd>Aman kumar</dd>
      <dt>Age</dt>
      <dd>22</dd>
      <dt>City</dt>
      <dd>Ranchi</dd>
      <dt>State</dt>
      <dd>Jharkhand</dd>
      <dt>Country</dt>
      <dd>India</dd>
   </dl>
</body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
dt Yes Yes Yes Yes Yes
html_tags_reference.htm
Advertisements