Styling Definition Lists

Each entry in a definition list has two parts. There is the term that is being defined and there is the definition of that term. These are entered in the <dt> and <dd> tags respectively within the overall <dl>.Admittedly the standards don't require that the terms and definitions alternate within the list and you could set up any combination of these entries but if you do so then semantically you are using the wrong tags to define your content since an actual definition list will always consist of terms and the definition of those terms. We'll therefore ignore those incorrect uses of a definition list and concentrate on the situation where we have a proper definition list with terms and definitions.

Here's a simple definition list:

HTML
the markup language used to semantically define what all of the elements of your web page content are
Stylesheet
a language used to define the appearance and positioning of the content of your web page, allows different definitions for different media
Javascript
defines the behaviour of the content of your web page such as which links should open a new window, what validation should be done to form fields and what elements should move and when

As you can see, the default styling of our definition list is not as neat as it could be. Rather than having the definitions appearing under the terms and slightly indented as most browsers default to for this type of list I am sure you would prefer that the term and definition appear next to one another on the same line. A couple of simple stylesheet commands will do this for us.

Here's the same definition list styled to place the terms and definitions next to one another:

HTML
the markup language used to semantically define what all of the elements of your web page content are
Stylesheet
a language used to define the appearance and positioning of the content of your web page, allows different definitions for different media
Javascript
defines the behaviour of the content of your web page such as which links should open a new window, what validation should be done to form fields and what elements should move and when

The stylesheet commands required to produce this effect are straightforward once you know what you need. The first thing you need to decide upon is the width that you are going to allow for your term. This value will appear twice in the definition, once for the width of the terms and once as the left-margin of the definitions. I used 100 pixels for the above example list.

The stylesheet entries I used for the second copy of the definition list above therefore are:

dt {width:100px; float:left;}
dd {margin-left:100px;}

The only change you might need to make to set up your own definition list with the terms and definitions side by side is to change both references to 100px to whatever width you decide to set for your terms.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate