Home
March 2026

dl - The HTML Description List Element

Description lists are cool. They start with a <dl> then put <dt> and <dd> elements inside them for the content.

They're like <ul> and <ol> lists but with two levels:

HTML

<p>William Gibson Novels<p>

<dl>
  <dt>Neuromancer</dt>
  <dd>The 1984 book that coined the term cyberspace.</dd>

  <dt>The Peripheral</dt>
  <dd>First of The Jackpot Trilogy.</dd>

  <dt>The Difference Engine</dt>
  <dd>Collaborative effort with Bruce Sterling.</dd>
</dl>

Output

William Gibson Novels

Neuromancer
The 1984 book that coined the term cyberspace.
The Peripheral
First of The Jackpot Trilogy.
The Difference Engine
Collaborative effort with Bruce Sterling.

Looks great of out of the box.

You can also wrap <dt>/<dd> pairs in <div> tags for extra styling:

HTML

<p>Stephen King Novels<p>

<dl>
  <dt>The Stand</dt>
  <dd>One billion pages long. Never gets boring.</dd>

  <div class="highlight">
    <dt>The Gunslinger</dt>
    <dd>Roland begins the journey to the dark tower.</dd>
  </div>

  <dt>Misery</dt>
  <dd>Great book. Kathy Bates did it proud in the flick.</dd>
</dl>

<style>
.highlight {
  background-color: var(--faded-accent-color);
  padding: var(--default-padding);
}
</style>

Output

Stephen King Novels

The Stand
One billion pages long. Never gets boring.
The Gunslinger
Roland begins the journey to the dark tower.
Misery
Great book. Kathy Bates did it proud in the flick.

I often forget they exist. Love it when I remember them. And, if you really want to see them fly, check out Ben Myers' post on them.

-a

end of line

Endnotes

I keep forgetting which of the three elements goes where. The official title for <dt> is "Description Term" which doesn't sit in my brain.

Gonna start calling it "Description Title" in my head so it's:

  • dl - the list
  • dt - the title
  • dd - the details

References