<dl> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them
What does <dl> HTML Tag do?
The <dl> element defines a description list.
Display
inline
Usage
textual

Code Example

<dl>
 <dt>HTML</dt>
 <dd>Hypertext Markup Language, the language for authoring web documents.</dd>
 <dt>CSS</dt>
 <dd>Cascading Style Sheets, the language for defining the styles and presentation of an HTML document.</dd>
 <dt> JavaScript</dt>
 <dd>A scripting language built-in to most browsers and designed to be used with web documents.</dd>
</dl>
HTML
Hypertext Markup Language, the language for authoring web documents.
CSS
Cascading Style Sheets, the language for defining the styles and presentation of an HTML document.
JavaScript
A scripting language built-in to most browsers and designed to be used with web documents.

Description Lists

The description list allows you to create a list of terms and then provide one or more descriptions for each term. In HTML 4, the <dl> tag defined a “definition list.” But in HTML5, this has been changed to “description list.” This change has little meaning, other than to indicate that the terms and descriptions don’t have to be definitions. For example, you could use the description list for presenting metadata on a blog post:

<dl>  <dt>Author</dt>  <dd>Kate Smith</dd>  <dt>Published</dt>  <dd>13 November 2015</dd>  <dt>Tags</dt>  <dd>HTML, CSS, JS, monkeys</dd> </dl> 
Author
Kate Smith
Published
13 November 2015
Tags
HTML, CSS, JS, monkeys

The <dl> element can be used for any type of one-to-many name-value pair lists.

When not to use <dl>

While, generally, the definition of the <dl> tag has expanded between HTML 4 and HTML5, there is one use case which was formerly suggested and which has now been deprecated: dialogue.

<!-- DEPRECATED -->  <dl> <dt>Rick</dt> <dd>What's that you're playing?</dd> <dt>Sam</dt> <dd>A little something on my own.</dd> <dt>Rick</dt> <dd>Stop it. You know what I want to hear.</dd> <dt>Sam</dt> <dd>No, I don't.</dd> <dt>Rick</dt> <dd>You played it for her, you can play it for me.</dd> <dt>Sam<dt> <dd>I don't think I can remember</dd> <dt>Rick</dt> <dd>If she can stand it, I can. Play it.</dd> <dt>Sam</dt> <dd>Yes, boss.</dd> </dl> 
Rick
What’s that you’re playing?
Sam
A little something on my own.
Rick
Stop it. You know what I want to hear.
Sam
No, I don’t.
Rick
You played it for her, you can play it for me.
Sam

I don’t think I can remember
Rick
If she can stand it, I can. Play it.
Sam
Yes, boss.

While this is deliberately against the HTML specification, it is hard to imagine any problems created by this approach to marking up dialog. (Use at your own risk, though).

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for dl

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll