HTML - <dl> Tag

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

This encloses a list of groups of words specified using the <dt> tag and the description provided by the <dd> element. The <dt> tag defines a data term, while the <dd> tag defines a data description. The description lists are also useful for representing metadata as a list of key and value pairs. The description list is similar to other lists, but in this list, each list item has two entries, a term and a description.

Syntax

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

Attribute

HTML dl tag supports Global and Event attributes of HTML.

Examples of HTML dl Tag

Bellow examples will illustrate the usage of dl tag. Where, when and how to use dl tag.

Creating Description list Item

In the following example, we are creating 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 descrition list-->
   <dl>
      <dt>HTML</dt>
      <dd>
         HTML stands for Hyper Text Markup Language.
      </dd>
   </dl>
</body>
</html>

Multiple Description list Item

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dl Tag</title>
</head>
<body>
   <!--create a descrition 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>

Multiple description list with multiple data desccription

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

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML dl Tag</title>
</head>
<body>
   <!--create a descrition 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
dt	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm