KuraFire Network

A very useful but often overlooked part of %HTML% (and %XHTML%), the Definition List (DL) can serve many purposes and also increase semantic purity of your pages.

Not a lot of people know that it exists, and many that do hardly use it: the definition list. The HTML 4.01 specification has the following to say about them:

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

Being that they consist of two parts, each of which can be used an infinite number of times in all combinations (e.g. five DT's with only one DD, and vice versa), makes them very suitable for a number of purposes. Of course, the name itself gives away a very obvious one: to have a list of definitions and descriptions. An example:

HTML

HyperText Markup Language

A structural markup language used to create documents for the World Wide Web

CSS

Cascading Style Sheets

A presentational language used to define the styling of markup languages

The markup for that would be as follows:

<dl>
  <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dd>A structural markup language used to create 
        documents for the World Wide Web</dd>
  <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd>A presentational language used to define
        the styling of markup languages</dd>
</dl>

However, you can use them for much more than that. For instance, on this site itself, I use definition lists all over the side column. All of those sections are made using definition lists. I chose this approach because I found that I used a lot of terms with data that belonged to each term, respectively. I could have used headers and unordered lists, but if you look at something like the Recent Reads, it doesn't seem right having a header for every person or site name. Worse, I'd have to use an unordered list with only one item in each list for the title (and link) of the page I'm linking to. No, a definition list is perfect for that scenario.

Other uses that make sense, too, are conversations. Dunstan Orchard has a great example of how to use DL's for a conversation.

Styling definition lists

Another great aspect to definition lists is that they are very easy and flexible to style. Usually, you will want your terms to be more visible than their description, and given that terms and descriptions are two different tags, styling them is a piece of cake:

dt {
    font-weight: bold;
    font-size: 120%;
}
dd {
    font-style: oblique;
}

In a future post, I will go into a plethora of interesting and fun ways to style definition lists.

Bookmark: Newsvine del.icio.us Digg