A description list is a list of words that each have a description. In HTML, lists describe specific information in a list format. Ordered Lists, Unordered Lists, and descriptive Lists are examples of HTML lists.
Description lists are useful for providing definitions for certain phrases defined in our listings or having a dictionary-style format.
A Description list will display in the browser as follows
Description List term
Description list term explained
What tags do you use in a description HTML list
Unlike ordered and unordered lists where you only use 2 HTML tags, a description list uses three tags.
To create a description list in HTML, you use the <dl> tags. The <dl> tags are responsible for creating the list itself and not the list items.
After creating the list element itself, you need to create the description title and the title description. This is done through the <dt> and <dd> tags respectively.
How can you format a description HTML list
You can format your list in one of two ways, inline styling (which we don’t recommend, you can see why here) or adding a class attribute to the list and styling your list with CSS.
Description List coding example
In the below example, we started with the Basic HTML document structure, with basic metadata in the head tag. If you are unsure what is being added to the <head> tag you can go read our full article on Metadata to include in head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Description List with Example</title>
</head>
<body>
<dl>
<dt>
Descripion list
</dt>
<dd>
A description list is a list of words that each have a description
</dd>
<dt>How to Join our discord</dt>
<dd>
Click link in the conclusion of this article
</dd>
</dl>
</body>
</html>
The above code should render the following unordered list in the browser:
Conclusion
Creating a description list in HTML requires defining the list element with the <dl> tag and wrapping the title and description of the title in a <dt> and <dd> tag respectively. Description lists in HTML serve a very different purpose to ordered or unordered lists, but they have a good use case.
Did you know that description lists existed in HTML?
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
