Signup/Sign In

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.

Description List example

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.

multiple term single description

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.