skip to content

CSS: Formatting a Definition List

 Tweet Share0 Tweets

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.


Send a message to The Art of Web:

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

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

User Comments

Post your comment or question

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.

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?

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.

28 June, 2013

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

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.

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.

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.

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!

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.

11 January, 2006

Good example, but, did you try to print that page on Internet Explorer?

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.