CSS: Formatting a Definition List

Tweet 0 Shares 0 Tweets 14 Comments

With the comeback of 'semantic markup' people are once again looking at what's the right tag to be using for different types of information. For example, unordered lists for navigation and tables only where absolutely necessary. One commonly overlooked option for markup of glossaries and definition lists is the dl attribute itself.

The Definition List (DL)

We know what the basic DL output looks like - not very attractive - which is why they are rarely used by webmasters. Here you can see an unformatted list with some sample content:

first item: definition for first item in list
second item: definition for second item in list
extending across more than one line
third item: definition for third item in list

There are two options for adding some formatting. The first is to start adding HTML tags such as <b></b> for the 'data term' (dt) and maybe a smaller font size, or italics for the 'data definition' (dd). But we can do all that and more much better using CSS.

Example 1

Let's start with some simple CSS styles:

  dt {
    font-weight: bold;
    text-decoration: underline;
  }
  dd {
    margin: 0;
    padding: 0 0 0.5em 0;
  }

Our simple list now looks a bit different. The indenting has been removed, some vertical padding inserted, and the data terms have been bolded and underlined:

first item: definition for first item in list
second item: definition for second item in list
extending across more than one line
third item: definition for third item in list

That's a move in the right direction, but probably still not enough to convince people of the merits of this approach. The following example should prove more persuasive.

Example 2

In the first example we were just tinkering at the edges of what's possible using CSS. This example uses slightly more advanced code to further enhance the appearance of the list:

  dl {
    border: 3px double #ccc;
    padding: 0.5em;
  }
  dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
    color: green;
  }
  dt::after {
    content: ":";
  }
  dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
  }

The list now appears as if the items were placed in a table:

first item: definition for first item in list
second item: definition for second item in list
extending across more than one line
third item: definition for third item in list

Even the most sceptical webmaster should now be starting to re-think their position.

Advantages of CSS formatting over HTML

So why are we doing this again? There are a number of reasons:

separation of content from formatting: this is the 'holy grail' for css programmers. As illustrated by sites such as css Zen Garden, separation means that the look and feel of a site can be drastically altered without changes to the underlying HTML code.
optimised for search engine spiders: it pays to be friendly to spiders as they're the only way to get your site to appear in search engine result pages (SERPs). The more advanced spiders are now starting to pay attention to how content is marked up and how that information can be incorporated into their search algorithms.
saves bandwidth: you also reduce the amount of HTML required each time a list is presented. If the CSS is sourced from an external file then it only has to download once and the browser can use a cached version for subsequent pages.

It might take some time to 'clean up' your existing HTML code and convert lists and other elements to CSS but the advantages now and ongoing make it worthwhile.

Using Flexbox

Here are two more layout examples, this time using CSS Flexible Box Layout which gives us something like a TABLE only more flexible:

first item: definition for first item in list
second item: definition for second item in list
extending across more than one line
third item: definition for third item in list

CSS styles:

<style type="text/css">

  dl {
    display: flex;
    flex-flow: row wrap;
    border: solid #333;
    border-width: 1px 1px 0 0;
  }
  dt {
    flex-basis: 20%;
    padding: 2px 4px;
    background: #333;
    text-align: right;
    color: #fff;
  }
  dd {
    flex-basis: 70%;
    flex-grow: 1;
    margin: 0;
    padding: 2px 4px;
    border-bottom: 1px solid #333;
  }

</style>

And here we have a horizontal layout. This is not so neat as we have to define a height for the DL and the number of items which can be displayed as columns is limited unless you want them to scroll horizontally:

first item: definition for first item in list
second item: definition for second item in list
extending across more than one line
third item: definition for third item in list

CSS styles:

<style type="text/css">

  dl {
    display: flex;
    flex-flow: column wrap;
    max-height: 6em;
    border: 1px solid #333;
  }
  dt {
    padding: 2px 4px;
    background: #333;
    color: #fff;
  }
  dd {
    margin: 0;
    padding: 4px;
    min-height: 3em;
  }

</style>

In all cases the HTML markup is identical.

< CSS

User Comments

Post your comment or question

Marcin 3 March, 2021

There's one slight improvement to the float version that allows it to contain _both_ multiple `dt` per `dd` and multiple `dd` per `dt`

dd::after { /* clears proceeding dt(s) ensuring that the next dd will be after next dt */ content: ""; display: table; clear: left; }

Mike 27 February, 2020

Any idea how to force the dd to list horizontal

Example "Years" is a row and if I have 1 dd value it's to the right of it. However, I want <dd> to be on the same row as years for 2014. Years: 2013, 2014

<dt>Years:</dt>
<dd> 2013</dd>
<dd>2014</dd>

Syed Jafar Rizvi 6 January, 2020

Hi. Thank you for the tutorial.
For the example 2, is there a way to modify it for RTL scripts?
Put the <dt> on the right and <dd> on the left?

pihentagy 4 January, 2019

Can I have (without markup change of course) a vertical definition list with css?

So if I have:

1: one
2: two
3: three

I'd like to have:

1 2 3
one two three

dl { display: flex; flex-flow: column wrap; max-height: 3em; }

You just have to set a max-height for the list container. There may be another way using "break-after: column;" on DD, but browser support is, so far, limited.

Bob Kerstetter 28 October, 2017

Modern typography does not require underlining. Underling makes no sense and it looks terrible. Just my opinion. Other than that, thanks for the article.

Richard Wendrock 28 July, 2017

Thank you for this article. I am late getting to the party but his is greatly appreciated. You used 100px to size the first column, how would you size the column to fit the contents? or how would you size the left column to fit the widest content?

DS 30 January, 2016

For years I've been a strong supporter of definition lists - I think they're definitely undervalued and underused.

However, they are extremely difficult to style consistently when a less static layout is desired. For example, if the width of the text in DT is not known (e.g., for i18n this is an issue as German words can be very long indeed!)

I often have to resort to using a bit of JS to make all the DTs match the width of the widest one. It's such a shame there's no easy way to achieve a flexible, responsive layout with css alone.

P.S., you can get around the issue that Alex has pointed out (if the DD is shorter in height than the DT) by adding a `float: left` to the DD, too, and ensuring the DL is wide enough to accommodate both.

Jonathan Davies 28 June, 2013

Just what I was looking for to explain the transitions in a state machine diagram

Warren B. Merriman 28 May, 2013

I like this, but when I use the

dt:after {
content: ":";

I get the ':' at the start of every new line in the dd element.

?! The ":" is added to the end of the dt and not the start of the dd.

Alex 20 February, 2013

Please note that if dt block contains more lines of text than dd, it makes all the structure to lose the correct alignment.

Kris Bulman 19 May, 2012

What about adding a thumnail to this equation? I'd love to break out of tables, where I was previously using rowspan and throwing a thumbnail on the right and have the lists wrap around it, i am finding it hard to fit into this method without breaking the structure.

Rodrigo 23 March, 2012

I agree with fred. I'm working with Zend Framework where Definition lists are employed extensively throughout the Zend_Form component, your article shed lots of light. Thanks!

Grateful Fred - web designer 15 September, 2011

I've been designing websites for 8 years and have shied away from Definition Lists, mainly out of ignorance. After reading your brilliant article I can't wait to try it out. Thanks for making something so simple to understand.

Rafael 11 January, 2006

Good example, but, did you try to print that page on Internet Explorer?
www.the-art-of-web.com/css/format-dl/

Try to print second page ... you will see the result. Something is not working well (I see other definition lists that print ok).

Thank you

Rafael, MSIE (Win) does have a problem printing this page but not I think with the formatted definition list. If you copy the example to one of your own pages and print I expect it will come out ok.