Skip to main content

Description Lists

In this tutorial, we'll be learning about Description Lists in HTML. Description Lists are not often used but they are important for structuring certain types of data in HTML.

What is a Description List?​

A Description List is a type of list that allows you to list a series of terms and descriptions. This is especially useful when you want to create a glossary or a set of metadata definitions.

In HTML, a Description List is created using the <dl> tag. Within the <dl> tag, you will then define your terms with the <dt> tag and your descriptions with the <dd> tag.

Here's a basic example of how you can structure a Description List:


<dl>
  <dt>Coffee</dt>
  <dd>A hot drink made from the roasted and ground seeds of a tropical shrub.</dd>
  
  <dt>Milk</dt>
  <dd>A white liquid produced by the mammary glands of mammals.</dd>
</dl>

In the above example, 'Coffee' and 'Milk' are the terms and the lines following each term are the descriptions.

Nesting Multiple Descriptions​

Sometimes, you might have multiple descriptions for a single term. This can be easily accommodated in a Description List.

Here's an example:


<dl>
  <dt>Coffee</dt>
  <dd>A hot drink made from the roasted and ground seeds of a tropical shrub.</dd>
  <dd>Available in many variants like espresso, cappuccino, latte etc.</dd>
</dl>

In the above example, 'Coffee' has two descriptions.

Nesting Multiple Terms​

Just like descriptions, you can also have multiple terms for a single description.

Here's an example:


<dl>
  <dt>Coffee</dt>
  <dt>Joe</dt>
  <dd>A hot drink made from the roasted and ground seeds of a tropical shrub.</dd>
</dl>

In the above example, 'Coffee' and 'Joe' have the same description.

Styling Description Lists​

Just like any other HTML element, Description Lists can also be styled using CSS. You can change the font, color, size, alignment and more to make your list more visually appealing.

Here's an example:


<dl style="font-family: Arial, sans-serif; color: darkblue;">
  <dt>Coffee</dt>
  <dd>A hot drink made from the roasted and ground seeds of a tropical shrub.</dd>
  
  <dt>Milk</dt>
  <dd>A white liquid produced by the mammary glands of mammals.</dd>
</dl>

In the above example, the font is set to Arial and the text color is set to dark blue.

That's all there is to Description Lists in HTML. They are simple to use and can be very useful for structuring certain types of data on your web pages. Happy coding!