HTML DL Tag

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:

Example

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

Example: 

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

Element
<dl>YesYesYesYesYes

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.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

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

Leave a Reply

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