Skip to main content

HTML Definition Lists

Definition Lists are the most unique and specialized of the three HTML list types. Unlike ordered (<ol>) or unordered (<ul>) lists, which contain a list of items, the Definition List (<dl>) is designed to group term-value pairs.

This structure is used when you need to present data that consists of a label or term, followed by its description or definition.


The Three Tags of a Definition List​

The definition list requires three tags to establish the correct semantic relationship:

  1. <dl> (Definition List): The container tag that wraps the entire list of terms and definitions.
  2. <dt> (Definition Term): Specifies the term, name, or label being defined.
  3. <dd> (Definition Description): Specifies the definition, description, or value associated with the preceding <dt>.

Example: Creating a Glossary​

The most common use case for a definition list is a glossary or dictionary, where a term is followed immediately by its meaning.

index.html: Glossary Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Definition List Example</title>
</head>
<body>
  <h1>Basic HTML Glossary</h1>
  
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language. The standard markup language for creating web pages.</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets. Used to control the appearance and presentation of the web page.</dd>
    
    <dt>Semantic</dt>
    <dd>Using HTML elements according to their meaning, which helps browsers and screen readers understand content structure.</dd>
  </dl>
</body>
</html>
http://.../index.html

Basic HTML Glossary

HTML
HyperText Markup Language. The standard markup language for creating web pages.
CSS
Cascading Style Sheets. Used to control the appearance and presentation of the web page.
Semantic
Using HTML elements according to their meaning, which helps browsers and screen readers understand content structure.
Default Styling

Browsers typically render the <dt> element as bold or on its own line, and the <dd> element is usually indented.


Advanced Definition List Use Cases​

The <dl> element is highly valuable because of its term-description pairing, making it useful far beyond a simple glossary.

1. Metadata and Site Information​

You can use a definition list to present technical data, product specifications, or author information clearly.

Product Metadata Example
<h3>Product Specifications</h3>
<dl>
  <dt>Model Number</dt>
  <dd>XH-5000</dd>
  
  <dt>Weight</dt>
  <dd>2.5 kg</dd>
  
  <dt>Color Options</dt>
  <dd>Black, White, Red</dd>
</dl>

2. Multiple Terms for One Definition​

It is valid to have several terms linked to a single definition. This is useful when synonyms share the same meaning.

Multiple Terms Example
<dl>
  <dt>Client-side</dt>
  <dt>Front-end</dt>
  <dd>Code that executes in the user's web browser, controlling the interface and interaction.</dd>
</dl>

3. Multiple Definitions for One Term​

Conversely, a single term can have multiple, distinct descriptions (though this is less common).

Multiple Definitions Example
<dl>
  <dt>HTTP</dt>
  <dd>The protocol used to transfer data over the Web.</dd>
  <dd>The foundation of any data exchange on the Web.</dd>
</dl>

<dl> vs. Tables​

While tables (<table>) can also display key-value pairs, the Definition List (<dl>) is the semantically correct choice when the information has a descriptive relationship, rather than a spreadsheet-like structure.

  • Use <dl>: For a list of characteristics, definitions, or metadata.
  • Use <table>: For displaying complex, structured data, comparison grids, or large datasets (e.g., financial data, sports scores).

Conclusion​

The Definition List (<dl>) is a powerful but often underused HTML tool. By correctly pairing <dt> (the term) and <dd> (the description), you give your content high semantic value, making it easier for search engines and assistive technologies to understand the structure of your paired data.