How to create a descriptive list in HTML?
Answer: Using <dl> and <dt> tag and description can be added using <dd> tag.
A description list is used to describe each item in the list. It gives detailed information about each item. This description list can be created using HTML on any webpage.
Creating a Description list
The description list can be created in HTML using <dl> tag. The terms are added using the <dt> tag and the description is provided under the <dd> tag.
On the webpage, the definition is placed in the immediate next line, slightly indented inwards.
Here is an example to create a description list in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<style>
dt {
font-weight: bold;
}
</style>
<body>
<h2> Description List </h2>
<dl>
<dt> Apple </dt>
<dd> It is a fruit. It is good to eat an apple everyday</dd>
<dt>Potato</dt>
<dd> It is a vegetable. It can be combined with every other vegetable to prepare a tasty curry.</dd>
<dt> Rose </dt>
<dd> It is a flower usually found with different colours. <dd>
</dl>
</body>
</html>
Output:
Here is the output of the above program.
Multiple term single description
The above example has a single term and a single description. But we can also add multiple terms with a single description in the <dl> list.
Here is an example to illustrate a description list with multiple terms and a single description.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<style>
dt {
font-weight: bold;
}
</style>
<body>
<h2> Description List </h2>
<dl>
<dt> Apple </dt>
<dt> Orange </dt>
<dd> They are fruit. It is good to eat fruits everyday</dd>
<dt>Potato</dt>
<dt> Brinjal</dt>
<dd> They are vegetables. They can be combined with every other vegetable to prepare a tasty curry.</dd>
</dl>
</body>
</html>
Output:
Here is the output of the above program.
Single term multiple descriptions
The <dl> can also be combined with a single term with multiple descriptions. Here is a small example to illustrate this.
Conclusion
A description list can be created using HTML <dl> tag. A description list contains a <dt> element and <dd> element. We can create a description list with a single term and a single description or multiple terms with multiple descriptions. You can design the description list as per your requirement.
