HTML <dl> Tag
Concept
The <dl> tag in HTML is used to create a description list, which is a list of terms and their corresponding descriptions. This tag is often used in conjunction with the <dt> tag for the term (description term) and the <dd> tag for the description (description definition). It’s a way to organize information in a key-value pair format, where the terms are the keys and the descriptions are the values.
Implementation
Example 1: Creating a Glossary
Here’s an example of how you can use the <dl> tag to create a glossary of terms:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Example 2: Describing a Product
You can also use the <dl> tag to describe a product’s features:
<dl>
<dt>Product Name</dt>
<dd>Super Widget 3000</dd>
<dt>Manufacturer</dt>
<dd>WidgetCorp</dd>
<dt>Price</dt>
<dd>$49.99</dd>
</dl>
Try it out below:
Attributes
| Attribute | Description |
|---|---|
| Global Attributes | The <dl> tag supports all the global attributes in HTML. |
| Event Attributes | The <dl> tag also supports all the event attributes in HTML. |
Browser Support
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Default CSS Settings
Most browsers will display the <dl> element with the following default CSS settings:
dl {
margin-right: 0;
}
Conclusion
The <dl> tag provides a structured way to present terms and their corresponding descriptions.
It’s a versatile tag that can be used in various contexts, such as creating glossaries, describing products, or any situation where key-value pairs are needed.