<dt>

Defines a term/name in a description list

Definition and Usage

The <dt> element establishes a term or name in a description list.

The <dt> tag is used inside <dl> (description list) together with <dd> (description definition).

The <dt> tag represents the term being described, while the following <dd> tag(s) provide the description or definition.

Tip: A single <dt> can be followed by multiple <dd> elements, allowing multiple definitions for the same term.

Note: The <dt> tag must be a direct child of the <dl> element and should come before its associated <dd> element(s).

Browser Support

The <dt> tag is supported in all browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The <dt> tag supports the Global Attributes in HTML.

The <dt> tag also supports the Event Attributes in HTML.

Examples

Basic Term Usage

Define terms in a simple description list:

Example
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web interactivity</dd>
</dl>

Multiple Terms for One Definition

Multiple <dt> elements can share the same description:

Example
<dl>
  <dt>Frontend</dt>
  <dt>Client-side</dt>
  <dd>The part of a web application that runs in the user's browser</dd>

  <dt>Backend</dt>
  <dt>Server-side</dt>
  <dd>The part of a web application that runs on the server</dd>
</dl>

Styled Terms

Apply CSS styling to terms:

Example
<style>
  dt {
    font-size: 18px;
    font-weight: 700;
    color: #745af2;
    margin-top: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
  }

  dd {
    margin-left: 20px;
    margin-top: 8px;
    color: #555;
  }
</style>

<dl>
  <dt>Responsive Design</dt>
  <dd>Design approach that makes web pages render well on different devices</dd>

  <dt>Mobile-First</dt>
  <dd>Design strategy that starts with mobile devices and scales up</dd>
</dl>

Glossary with Terms

Create a technical glossary:

Example
<h2>Programming Glossary</h2>
<dl>
  <dt>Variable</dt>
  <dd>A named storage location in computer memory</dd>

  <dt>Function</dt>
  <dd>A reusable block of code that performs a specific task</dd>

  <dt>Array</dt>
  <dd>A data structure that stores multiple values in a single variable</dd>

  <dt>Loop</dt>
  <dd>A programming structure that repeats a block of code</dd>
</dl>

Product Features

List product features with descriptions:

Example
<h3>Smartphone Features</h3>
<dl>
  <dt>5G Connectivity</dt>
  <dd>Ultra-fast mobile internet speeds up to 10 Gbps</dd>

  <dt>Triple Camera System</dt>
  <dd>12MP wide, 12MP ultra-wide, and 12MP telephoto lenses</dd>

  <dt>Battery Life</dt>
  <dd>All-day battery with up to 20 hours of video playback</dd>

  <dt>Display</dt>
  <dd>6.7-inch Super Retina XDR display with ProMotion</dd>
</dl>

Metadata Presentation

Display document or file metadata:

Example
<h3>Document Information</h3>
<dl>
  <dt>Author</dt>
  <dd>Jane Smith</dd>

  <dt>Published</dt>
  <dd>October 1, 2024</dd>

  <dt>Last Modified</dt>
  <dd>October 15, 2024</dd>

  <dt>Category</dt>
  <dd>Web Development</dd>

  <dt>Tags</dt>
  <dd>HTML, CSS, JavaScript, Tutorial</dd>
</dl>

DT and DD Relationship

Understanding how <dt> and <dd> work together:

One-to-One: One <dt> followed by one <dd>
One-to-Many: One <dt> followed by multiple <dd> elements (multiple definitions)
Many-to-One: Multiple <dt> elements followed by one <dd> (synonyms)
Mixed: Any combination of the above patterns

Important: The <dt> element must be inside a <dl> and should appear before its associated <dd> element(s).

Styling Terms with CSS

Common techniques for styling description terms:

Bold and Colored Terms

Example
<style>
  dt {
    font-weight: 700;
    color: #745af2;
    font-size: 16px;
    margin-bottom: 8px;
  }

  dd {
    margin-left: 20px;
    margin-bottom: 16px;
  }
</style>

Uppercase with Background

Example
<style>
  dt {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    background: #f0f0f0;
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 16px;
  }
</style>

Icon Before Terms

Example
<style>
  dt::before {
    content: "▶ ";
    color: #745af2;
    font-weight: bold;
    margin-right: 8px;
  }

  dt {
    font-weight: 600;
    margin-top: 12px;
  }
</style>

Horizontal Layout Terms

Example
<style>
  dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px 24px;
  }

  dt {
    font-weight: 700;
    text-align: right;
    color: #745af2;
  }

  dd {
    margin: 0;
  }
</style>

Best Practices for Marking Up Terms

Always place <dt> inside a <dl> element
Each <dt> should be followed by at least one <dd>
Keep term text concise and clear
Use multiple <dt> elements for synonyms or related terms
Don't nest block elements inside <dt> - keep it simple
Use CSS for visual styling, not additional markup
Maintain consistent styling across all terms in a list
Consider accessibility when applying styles (ensure sufficient contrast)
Use semantic HTML - don't use spans or divs to fake term styling

Try it Yourself

Interactive Example

Here's a live example of styled description terms:

HTML: HyperText Markup Language - structures web content
CSS: Cascading Style Sheets - styles and layouts web pages
JavaScript: Programming language for web interactivity

Try in Code Playground

Default CSS Settings

Most browsers will display the <dt> element with the following default values:

Default CSS
dt {
  display: block;
}

Related Tags

<dl>
Defines a description list
<dd>
Defines a description in a description list
<dfn>
Defines a definition term
<abbr>
Defines an abbreviation or acronym