HTML <dt> Tag

The <dt> element, short for definition term, is used to represent a term or name in a description list. A description list is a collection of terms and their corresponding descriptions, created with the <dl> element, where <dt> elements define the terms and <dd> elements provide their definitions.

The <dt> tag is typically paired with one or more <dd> elements to describe the term in detail. A single <dt> can be followed by multiple <dd> elements if the term has more than one associated description. Conversely, multiple <dt> elements can appear before a single <dd> if a definition applies to several terms.

The <dt> element is purely semantic - it gives meaning to the content, indicating that it represents a concept, name, or term, rather than defining its visual appearance. By default, browsers render <dt> text in bold to differentiate it from the definition text in <dd>, but this styling can be customized using CSS.

Example:

<dl>
  <dt>HTML</dt>
  <dd>A markup language used to structure content on the web.</dd>

  <dt>CSS</dt>
  <dd>A style sheet language used to design the appearance of web content.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that enables dynamic behavior on web pages.</dd>
</dl>

In this example:

• Each <dt> specifies a term (HTML, CSS, JavaScript).
• Each <dd> provides the description for the corresponding term.

The <dt> element enhances accessibility and semantic clarity, allowing assistive technologies to understand the relationship between terms and their descriptions. It is also useful for SEO, as it conveys structured information about the content on a page.