HTML <dt> Tag
Concept
The <dt> (Definition Term) tag in HTML is a vital component in crafting description lists, often used to define terms, concepts, or names within various fields. It’s typically paired with the <dd> (Description Details) tag to provide a clear and concise explanation of the term.
Implementation
Example 1: Description List for Programming Languages
<dl>
<dt>Python</dt>
<dd>A high-level, interpreted programming language known for its simplicity.</dd>
<dt>Java</dt>
<dd>A versatile programming language used in web development, mobile apps, and more.</dd>
</dl>
Example 2: Multiple Descriptions for a Single Term (Planets)
You can use multiple <dd> tags for a single <dt> to provide various facts about a term.
<dl>
<dt>Earth</dt>
<dd>The third planet from the Sun.</dd>
<dd>Only known planet to support life.</dd>
</dl>
Try it out below:
Example 3: Using CSS to Style a List of Famous Authors
<style>
dt {
font-weight: bold;
color: darkblue;
}
dd {
margin-left: 20px;
color: darkgreen;
}
</style>
<dl>
<dt>George Orwell</dt>
<dd>Author of "1984" and "Animal Farm."</dd>
<dt>J.K. Rowling</dt>
<dd>Creator of the "Harry Potter" series.</dd>
</dl>
Attributes
| Attribute | Description |
|---|---|
| Global Attributes | The <dt> tag supports all the global attributes in HTML. |
| Event Attributes | The <dt> 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
dt {
display: block;
}
Conclusion
The <dt> tag offers a structured way to present terms and their descriptions in various contexts, from programming languages to famous authors.
By understanding how to use and style the <dt> tag, you can create engaging and informative content that caters to different audiences.