Understanding and Using the HTML `<dt>` Element: Creating Structured Description Lists

Learn how to create clear and accessible description lists in HTML using the `<dt>` (description term) element. This tutorial explains the role of `<dt>` in defining terms within a `

` (description list) element, demonstrates its usage with `

` (description definition) elements, and highlights best practices for creating well-structured and user-friendly description lists.

---

---

Understanding the HTML <dt> Element

What is the <dt> Element?

The HTML <dt> element (description term) defines a term or name in a description list (<dl>). Description lists are used to present terms and their corresponding definitions or descriptions. Each term is defined by a <dt> element, and its description is provided by a <dd> (description definition) element.

Example:

HTML

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Browser Support

The <dt> element is widely supported across all major web browsers.

Browser	Support
Chrome	Yes
Firefox	Yes
Internet Explorer	Yes
Safari	Yes
Edge	Yes
Opera	Yes

Default CSS Styling

Most browsers render the <dt> element as a block-level element by default, meaning it starts on a new line and takes up the full width available.

CSS (Default)

dt {
  display: block;
}

---