This post aims to explain HTML <dl> Tag. We hope it will satisfy the educational needs of our readers.

The HTML <dl> tag is used to define a description list. A description list is a list of terms and their corresponding descriptions.

With terms and descriptions, here is a description list:


<!DOCTYPE html> <html><body><dl> <dt>Elon Musk</dt> <dd>Tesla | SpaceX | Neuro Link | Star Link</dd> <dt>Mark Zuckerberg</dt> <dd>Chief Executive Officer of Facebook | Meta</dd> </dl> </body></html>

Here is another example that illustrates the working of dl tag:


<!DOCTYPE html> <html><body><br><br> <br> <title>List of Countries and their Prime Ministers</title><br> <br> <br> <h1>List of Countries and their Prime Ministers</h1><br> <dl><br> <dt>USA</dt><br> <dd>Joe Biden</dd><br> <dt>UK</dt><br> <dd>Boris Johnson</dd><br> <dt>India</dt><br> <dd>Narendra Modi</dd><br> <dt>Canada</dt><br> <dd>Justin Trudeau</dd><br> <dt>Australia</dt><br> <dd>Scott Morrison</dd><br> </dl><br> <br><br> </body></html>

HTML <dl> tag Uses

The HTML <dl> tag is used to create a definition list. It is used to display a list of terms and their corresponding definitions or descriptions. The <dl> tag is typically used to create glossaries, dictionaries, or lists of technical terms and their meanings.

The <dl> tag should always be used together with the <dt> and <dd> tags, which are used to define the terms and descriptions, respectively. Each <dt> tag defines a term or phrase, and each <dd> tag defines the corresponding definition or description.

Uses and Definition

HTML dl Tag <dl> specifies a description list.

The <dl> tag is applied in combination with <dt> (identifies terms/names) and <dd> (explains each term/name).

Browser Compatibility


Event Attributes

The <dl> tag is also capable of accepting HTML Event Attributes.

Global Attributes

The <dl> tag is also capable of accepting HTML Global Attributes.

CSS Default Settings

The majority of browsers display the <dl> element utilizing the default values for HTML Tag dl:

dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
If this article was meaningful to you then do share this valuable information with your friends by clicking on the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *