The <dl> tag in HTML is used to represent the description list. This tag is used with <dt> and <dd> tag to create a list of terms and their associated descriptions.
Elements inside dl tag:
- <dt>: Defines a term in the list.
- <dd>: Provides the description or definition of the term.
<!DOCTYPE html>
<html>
<body>
<h2>dl Tag</h2>
<dl>
<dt>Item 1</dt>
<dd>This is description for item 1</dd>
<dt>Item 2</dt>
<dd>This is description for item 2</dd>
</dl>
</body>
</html>
Common Use Cases:
- Glossaries: Listing terms and their definitions.
- FAQs: Organizing questions and answers.
- Metadata: Describing key-value pairs, like technical specifications.
Styling dl Tag
<!DOCTYPE html>
<html lang="en">
<head>
<style>
dl {
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
dt {
font-weight: bold;
color: #2c3e50;
margin-top: 10px;
}
dd {
margin-left: 20px;
color: #34495e;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Fruits</h1>
<dl>
<dt>Apple</dt>
<dd>
A sweet, edible fruit produced by an apple tree.
</dd>
<dt>Banana</dt>
<dd>
A long, curved fruit that grows in clusters and has soft,
pulpy flesh and yellow skin when ripe.
</dd>
<dt>Cherry</dt>
<dd>A small, round fruit that is typically red or black and
has a pit in the center.
</dd>
</dl>
</body>
</html>