Tips 2 minute read Jan 10, 2025

Tip of the week #021: Use the description list element

Need to display a list where you have a key (or title) and a value? The description list element is perfect for this.

People often end up using a <table> if they are to generate content key-value pairs, e.g. JSON or an Javascript object, but you can also use a description list (<dl>).

Let's say you have this code:

 Language: javascript 
 const city = {
  name: "New York",
  nickname: "the Big Apple",
  population: "8.5 million",
  country: "United States",
  settled: "1624"  
} 

Instead of opting for a <table> like this:

 Language: html 
 <table>
  <tr>
    <th>Name</th>
    <th>Nickname</th>
    <th>Population</th>
    <th>Country</th>
    <th>Settled</th>
  </tr>
  <tr>
    <td>New York</td>
    <td>The Big Apple</td>
    <td>8.5 million</td>
    <td>United States</td>
    <td>1624</td>
  </tr>
</table> 

you can use <dl>:

 Language: html 
 <dl>
  <dt>Name</dt>
  <dd>New York</dd>
  <dt>Nickname</dt>
  <dd>The Big Apple</dd>
  <dt>Population</dt>
  <dd>8.5 million</dd>
  <dt>Country</dt>
  <dd>United States</dd>
  <dt>Settled</dt>
  <dd>1624</dd>
</dl> 

Tip: <dl> accepts wrapping each name-value in a <div> element. This is useful if you want to add styles to each group.

Demo

See the Pen Untitled by Håvard Brynjulfsen (@havardob) on CodePen.