HTML description-list Tutorial - Usage, Syntax, Attributes and Example

calender-iconPublished: 11 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

List is a collection of items which are related. Lists create a well structured and easy-to-read information. In HTML there are 3 types of list available.

  1. Ordered list <ol>
  2. unordered List <ul>
  3. Description List <dl>

Description list <dl>

In HTML, a Description List (<dl>) is used to define a list of terms and their corresponding descriptions. It is commonly used for glossary, metadata lists, and key-value representations. It consists of three main elements:

  • <dl> element is used to create description list.
  • <dt> element is used for list item and is known as description term.
  • <dd> element is used for description and is known as description descriptor.

Syntax : 


<dl>
<dt> List_item1 </dt>
<dd> List_item1-description </dd> 
</dl>

Example : 


<dl> 
<dt> Ferrari 599 GTO </dt> 
<dd> Launched in 2010 </dd> 
</dl> 
</dl> 
<dt> Ferrari 812 GTS </dt> 
<dd> Launched in 2019 </dd> 
</dl>

Output :

Ferrari 599 GTO
Launched in 2010
Ferrari 812 GTS
Launched in 2019

NOTE:

Avoid using <dd> element solely for creating indentation on a page. While it may work, this approach is considered bad practice as it misrepresents the purpose of description lists.


Tag Omission

The HTML <dl> element must have both start tag and end tag.

ATTRIBUTES

Description list <dl> element only has global attributes.

USAGE GUIDELINES

1. <dt> and <dd> should not necessarily be in pair

2. There can be multiple <dt> and only one <dd>

Example : 


<dl> 
<dt> Ferrari 330 America </dt> 
<dt> Ferrari 365 GT </dt> 
<dt> Ferrari 612 Scaglietti </dt> 
<dt> Ferrari Roma </dt> 
<dt> Ferrari California T </dt> 
<dd> Ferrari with Front-Engines </dd> 
</dl>


Ferrari 330 America
Ferrari 365 GT
Ferrari 612 Scaglietti
Ferrari Roma
Ferrari California T
Ferrari with Front-Engines

3. There can be single <dt> and multiple <dd>

Example : 


<dl> 
<dt> Ferrari Roma </dt> 
<dd> Launched in 2019 </dd> 
<dd> 3855cc engine </dd> 
<dd> V-8 engine </dd> 
<dd> F-154 engine </dd> 
</dl>


Ferrari Roma
Launched in 2019
3855cc engine
V-8 engine
F-154 engine


Nesting Description List

Description lists (<dl>, <dt>, <dd>) can be nested in several ways depending on how you structure the relationships between terms and descriptions. Below are different ways to nest description lists in HTML:

Nesting a <dl> Inside a <dd>

This is the most standard way to nest a description list, where a nested list is placed inside a <dd> (description). 


<dl>
 <dt>Fruit</dt>
 <dd>
  <dl>
    <dt>Apple</dt>
    <dd>Red or green, sweet or sour.</dd>
    <dt>Banana</dt>
    <dd>Yellow, soft, and sweet.</dd>
  </dl>
 </dd>
</dl>
Multiple <dd> for a Single <dt> with Nested <dl>

Here, the first <dd> gives a general definition, and the second <dd> contains a nested <dl> for specific examples. 


<dl>
 <dt>Programming Languages</dt>
 <dd>Used in software development.</dd>
 <dd>
  <dl>
    <dt>Python</dt>
    <dd>Popular for data science and web development.</dd>
    <dt>JavaScript</dt>
    <dd>Common in front-end web development.</dd>
  </dl>
 </dd>
</dl>

Frequently Asked Questions(FAQ)

When is a description list more appropriate than an unordered or ordered list ?
A description list (also known as a definition list) is more appropriate than an unordered or ordered list when you need to pair term with their descriptions. This is particularly useful in cases such as:
  • Glossaries – When defining a set of terms and their meanings.
  • Metadata or Attributes – When listing properties of an item with corresponding values (e.g., product specifications).
  • FAQs – When structuring a set of questions and answers.
  • Key-Value Pairs – When presenting structured data where each term has an associated description.

Can description lists be nested in HTML ?
Yes! Description lists can be nested in HTML. Generally a <dl> is placed inside a <dd> to create a hierarchical structure. 


<dl>
    <dt>Fruit</dt>
    <dd>
     <dl>
       <dt>Apple</dt>
       <dd>Red or green, sweet or sour.</dd>
       <dt>Banana</dt>
       <dd>Yellow, soft, and sweet.</dd>
     </dl>
    </dd>
</dl>

What are the benefits of using HTML description lists ?
  1. Clearly Defines Terms & Descriptions - Definition Term and Definition Description explicitly define relationships between content.
  2. Better Screen Reader Support - Screen readers can identify the list structure and read it correctly, improving accessibility
  3. Enhanced Organization - This list Presents Information in a Logical Flow hence is More structured and easier to scan compared to unordered or ordered lists.
  4. Ideal for Key-Value Pair Data Representation - Great for displaying structured data like dictionaries, attributes, FAQs, metadata, etc.
  5. Flexible Nesting - Can be used to create multilevel structures without complex markup.
  6. SEO Benefits - This list Can be used with Schema.org markup for better SEO.

How can I style description lists with CSS ?
You can style description lists using CSS by targeting the <dl>, <dt>, and <dd> tags seperately.

Are description lists accessible for screen readers ?
Yes, description lists are accessible and provide semantic meaning to screen readers, enhancing the user experience for visually impaired users.

Does definition list require that each <dd> will have <dt> tag?
The description term(<dt>) and description descriptor(<dd>) tags need not necessarily be in pair.
There can be multiple terms (<dt>) having only one description (<dd>).
There can be single terms (<dt>) with multiple descriptions (<dd>).