HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <dl> Tag

The <dl> tag in HTML defines a description list (also known as a definition list).
Each description list contains one or more pairs of terms (<dt>) and definitions (<dd>).
It is commonly used to display glossaries, FAQs, or metadata in a structured way.

Syntax

html

<dl>
  <dt>Term 1</dt>
  <dd>Description of Term 1</dd>
  <dt>Term 2</dt>
  <dd>Description of Term 2</dd>
</dl>

Attributes

TagAttributeDescription
<dl>Global AttributesSupports all global attributes such as id, class, title, and style.
<dt>Global AttributesCan use class, id, title, etc.
<dd>Global AttributesCan use class, id, title, and style attributes.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Description List Example</title>
  <style>
    dl {
      padding: 15px;
      width: 320px;
    }
    dt {
      font-weight: bold;
      color: #222;
      margin-top: 10px;
    }
    dd {
      margin-left: 20px;
      color: #555;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <h2>HTML Terminology</h2>
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language – the standard language for creating web pages.</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets – used to style and layout web pages.</dd>

    <dt>JavaScript</dt>
    <dd>A scripting language used to create dynamic and interactive effects on web pages.</dd>
  </dl>
</body>
</html>

Output

Browser Output

html

Use our TryIt Editor to see the output

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

The <dl>, <dt>, and <dd> tags have full browser support across all modern browsers.
Use our Try It Editor to see how terms and descriptions align differently based on your styling.

Notes

  • <dl> wraps the entire list, <dt> defines the term, and <dd> defines the description.
  • You can include multiple <dd> elements for one <dt> to provide more details.
  • Description lists are ideal for FAQs, glossaries, or attribute-value data.
  • Style them using CSS to create elegant layouts like two-column descriptions.

Conclusion

The <dl>, <dt>, and <dd> tags provide a semantic way to represent term–definition pairs.
They are perfect for glossaries, FAQs, and structured data lists.
With proper CSS styling, description lists can be made visually appealing and easy to read.

PreviousHTML <ol> TagNextHTML <img> Tag