HTML - <dl> Tag

The HTML <dl> tag represents a description list. 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

Following is the syntax of the <dl> tag −

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

Example

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 Description lists</title>
</head>
<body>
   <!--create a descrition list-->
   <dl>
      <dt>HTML</dt>
      <dd>HTML stands for Hyper Text Markup Language.</dd>
   </dl>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

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 Description lists</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>

On running the above code, the output window will pop up, consisting of text displayed on the webpage.

Example

In this example, we are creating an HTML description list using the <dl> tag. Then, we create multiple data terms using the <dt> tag within the list and a single data description using the <dd> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Description lists</title>
</head>
<body>
   <!--create a descrition list-->
   <dl>
      <dt>VS CODE</dt>
      <dt>Visual Studio Code.</dt>
      <dd>Visual Studio Code is lightweight but powerful code editor.</dd>
   </dl>
</body>
</html>

When we run the above code, it will generate an output displaying the text on the webpage.

Example

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 Description lists</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>

On running the above code, it will generate an output displaying the text on the webpage.

html_tags_reference.htm
Advertisements