A description list is used to create a collection of items with their descriptions. It is useful when we need to add items descriptions.
The description list items are created using <dl>, <dt>, and <dd> elements. The <dl> element is used to group the description list items, <dt> element is used to define items (term), and the <dd> element defines the description of that term.
The syntax for a description list is:
<dl>
<dt>HTML</dt>
<dd>HTML stands for HyperText Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is a programming language for web development.</dd>
</dl>HTML Description List Example
Here is a basic example to create a description list.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Description Lists</title>
</head>
<body>
<h2>HTML Description Lists</h2>
<dl>
<dt>HTML</dt>
<dd>HTML stands for HyperText Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is a programming language for web development.</dd>
</dl>
</body>
</html>
Output
HTML Description List Elements
| Elements | Description |
|---|---|
dl | It is used to create a description list container. |
dt | It is used to define the items (name, keyword, etc.). |
dd | It is used to define the description or definition of the item. |
Example 1: Styling a Description List with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Description Lists</title>
<style>
dl {
border: 1px solid #cac2c2;
padding: 10px;
width: 400px;
background-color: #f9f9f9;
}
dt {
font-weight: bold;
color: #2b80ff;
}
dd {
margin-left: 20px;
}
</style>
</head>
<body style="margin: 50px 0 0 100px;">
<h2>HTML Description Lists with CSS</h2>
<dl>
<dt>HTML</dt>
<dd>HTML stands for HyperText Markup Language.</dd>
<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is a programming language for web development.</dd>
</dl>
</body>
</html>
Output
Example 2: Creating a Nested Description List.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested Description Lists</title>
</head>
<body>
<h2>Nested Description Lists</h2>
<dl>
<dt>Fruits</dt>
<dd>
<dl>
<dt>Apple</dt>
<dd>Red or green in color, sweet and crunchy.</dd>
<dt>Mango</dt>
<dd>Sweet and juicy tropical fruit.</dd>
</dl>
</dd>
<dt>Vegetables</dt>
<dd>Leafy greens and root-based plants.</dd>
</dl>
</body>
</html>
Output
