skip to content

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.

< CSS


Send Feedback

Use this form to send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

CAPTCHA refresh

<- copy the digits from the image into this box

press Esc or click outside this box to close

Load Feedback Form

User Comments and Notes

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.

top