Home 〉 HTML Tutorials 〉 HTML Description List Tag - Learn '<dl>', '<dt>', '<dd>' with Syntax, Attributes & Examples
HTML Description List Tag - Learn '<dl>', '<dt>', '<dd>' with Syntax, Attributes & Examples !
HTML Description List Tag - Learn '<dl>', '<dt>', '<dd>' with Syntax, Attributes & Examples !
What are HTML Description Tags and how do they work?
The HTML description list tag ('<dl>') along with '<dt>' and '<dd>' is useful for presenting terms and their definitions. These tags are block-level elements and support all standard global attributes. We've shown practical examples using CSS inline styling for a clean layout. Understanding these tags is important for creating semantically structured and accessible content. The detailed blog post on HTML description list tag is as follows.
Introduction
HTML provides different types of lists to organize content. Among these, the HTML Description List is used when you want to list items with a term and a description — perfect for glossaries or definitions. It uses three elements:
- '<dl>' - Description List
- '<dt>' - Description Term
- '<dd>' - Description Detail
'<dl>', '<dt>', and '<dd>' are block-level elements.
Let's walk through the syntax, examples, attributes, and inline CSS styling to help you understand how to use these tags properly.
Syntax and Explanation
Syntax ✍
<dl>
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
</dl>
- '<dl>': The container element for the list.
- '<dt>': Defines the term (e.g., a keyword or title).
- '<dd>': Provides the description for that term.
HTML Tags Used in Description List
- '<dl>' - wraps the entire description list.
- '<dt>' - defines each term.
- '<dd>' - describes each term in detail.
Attributes of HTML Description Tags
These tags support global attributes like 'id', 'class', 'style', and 'title'.
- `id`: Unique identifier for styling or scripting
- `class`: Used to apply CSS styles
- `style`: Inline styling
- `title`: Tooltip text shown on hover
Example: Using 'style' Attribute
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<dl style="border: 1px solid #ccc; padding: 10px; border-radius: 5px;">
<dt style="font-weight: bold; color: #2e86de;">CSS</dt>
<dd style="margin-left: 20px; color: #555;">A stylesheet language used to describe the look of HTML documents.</dd>
</dl>
</body>
</html>
output 📌
- CSS
- A stylesheet language used to describe the look of HTML documents.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- The 'style' attribute adds visual design directly to the element.
- We've used border, padding, border-radius, color, and margin.
Inline CSS Styling Examples
Here are some useful CSS properties you can apply directly:
- 'color': Sets text color
- 'background-color': Sets background
- 'padding': Creates space inside the element
- 'margin': Creates space outside the element
- 'border': Adds border to elements
- 'border-radius': Rounds the corners
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<dl style="background-color: #f9f9f9; padding: 15px; border: 1px solid #ddd;">
<dt style="color: #333; font-size: 18px;">JavaScript</dt>
<dd style="color: #666;">A programming language used to make web pages interactive.</dd>
</dl>
</body>
</html>
output 📌
- JavaScript
- A programming language used to make web pages interactive.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Margin Explained with Examples - Master Spacing in Web Design
- CSS Padding Explained with Examples | CSS Box Model Guide
Related Topics:
- HTML Block, Inline, and Empty Elements Explained with Examples
- HTML List Tags - ul, ol, li Tags Explained with Examples
- HTML Semantic Elements - Complete Guide with Examples & Syntax
Frequently Asked Questions (FAQs)
Can I use multiple '<dt>' tags inside one '<dl>'?
Yes, you can have multiple '<dt>' tags and their corresponding '<dd>' tags inside a single '<dl>'.
Are '<dl>' tags used only for definitions?
Not necessarily. They can be used wherever a term-description structure fits, like FAQs or metadata.
Are '<dl>' tags SEO-friendly?
Yes, they improve content structure and are favored in semantic HTML.
Can I nest other HTML tags inside '<dd>'?
Yes, you can use tags like '<p>', '<a>', or '<span>' inside '<dd>' for enhanced formatting.