HTML Description Lists: dl, dt and dd for Terms and Definitions

A description list is a list of name and value pairs: terms and their definitions, questions and answers, or labels and values such as "Author: Asha Rao". HTML uses three elements for it.

A glossary#

<dl>
  <dt>HTML</dt>
  <dd>The language that describes the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>The language that controls how web pages look.</dd>

  <dt>JavaScript</dt>
  <dd>The language that makes web pages interactive.</dd>
</dl>

Browsers indent each <dd> under its term.

Name and value pairs#

Description lists also suit details such as product specifications or profile information:

<dl>
  <dt>Course</dt>
  <dd>HTML for Beginners</dd>
  <dt>Lessons</dt>
  <dd>46</dd>
  <dt>Level</dt>
  <dd>Beginner to advanced</dd>
</dl>

Several terms or descriptions#

One term can have several descriptions, and several terms can share one description:

<dl>
  <dt>Colour</dt>
  <dt>Color</dt>
  <dd>British and American spellings of the same word.</dd>

  <dt>Python</dt>
  <dd>A large non-venomous snake.</dd>
  <dd>A popular programming language.</dd>
</dl>

Grouping pairs with div#

To style each pair as one unit (for example, a card or a row), you may wrap each group of <dt> and <dd> in a <div>:

<dl>
  <div>
    <dt>Price</dt>
    <dd>₹499</dd>
  </div>
  <div>
    <dt>Delivery</dt>
    <dd>2 to 4 days</dd>
  </div>
</dl>

This is the only element HTML allows as a wrapper inside <dl>.

Description list or table?#

Use a description list for a simple set of names and values. If the data has several columns, such as names, prices and stock levels, use a table.

Practice#

<dl>
  <dt>Browser</dt>
  <dd>A program that downloads and displays web pages.</dd>
  <dt>Server</dt>
  <dd>A computer that stores websites and sends pages to browsers.</dd>
  <dt>URL</dt>
  <dd>The address of a page or file on the web.</dd>
</dl>

Key takeaway#