building menu...

CSS: Formatting a Definition List

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.

[Back to CSS]

Feedback and Questions

2006-01-11: Rafael says:

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.