`<dl> HTML Tag`

In HTML Tags

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

Contents

1 Code Example
2 Description Lists
3 When not to use <dl>
4 Browser Support for dl
5 Attributes of dl

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).