What is the Best Way to Mark up a Set of Terms and Descriptions?

---

OK, the question is certainly leading, in that it almost answers itself. You'll see what I mean when we take a look at the following two methods. More important than the question though, is that Method A is a very common solution when marking up term and description pairs, and that Method B is a far underused type of list—but one that can be used in a variety of applications and provides a far more flexible structure.

First, let's quickly take a look at a potentially familiar way of dealing with term/definition pairs—specifically the definitions of a few standards defined by the W3C.

Method A

 <ul>   <li>CSS<br />   A simple mechanism for adding style (e.g. fonts, colors, spacing) to   Web documents.</li>   <li>XHTML<br />   A family of current and future document types and modules that   reproduce, subset, and extend HTML, reformulated in XML.</li>   <li>XML<br />   A simple, very flexible text format derived from SGML.</li> </ul> 

This method seems to make sense, using an unordered list for structure and a <br /> tag to separate the terms from their definitions.

However, what if we wished to style each term (CSS, XHTML, or XML) differently from its definition? Our only option with Method A is to add some sort of style "hook" to the markup, such as an extra <span> or <strong> tag. Maintenance-wise though, that's not an ideal solution.

Figure 8-5 shows how Method A would appear in a typical browser, with each term and definition on its own line.

Figure 8-5: Method A as viewed in a typical browser

Aside from the inability to style each line uniquely, there isn't a whole lot wrong with Method A. But I bring this question up as an excuse to talk about the type of list found in Method B—the definition list.

Method B

 <dl>   <dt>CSS</dt>   <dd>A simple mechanism for adding style (e.g. fonts, colors, spacing)   to Web documents.</dd>   <dt>XHTML</dt>   <dd>A family of current and future document types and modules that   reproduce, subset, and extend HTML, reformulated in XML.</dd>   <dt>XML</dt>   <dd>A simple, very flexible text format derived from SGML.</dd> </dl> 

A definition list (<dl>) consists of two additional tags, <dt> (term) and <dd> (description). For the purposes of our example, using a definition list makes perfectly good sense, as we're defining a series of term/description pairs.

By default, most visual browsers will render a definition list with the description (<dd>) on its own line and indented slightly (see Figure 8-6). We can, of course, change that indentation if we wish using CSS.

Figure 8-6: Method B as viewed in a typical browser

Structure Leads to Style

Semantically, Method B is solid, giving us a separate element for each part of our list. This will enable us to style terms separately from their descriptions and vice versa.

For instance, something certifiably simple that we can do is to make bold the <dt>s with CSS. One declaration will do this for us, without adding anything additional to the markup.

 dt {   font-weight: bold;   } 

That's all there is to it, with no need to add <strong>, <b>, or even <span> tags to the list markup. Now, all <dt> elements will be bold, as you can see in Figure 8-7.

Figure 8-7: Method B with font-weight— bold; applied to <dt> elements

Adding Icons

You may have noticed that I like to add small images and icons to elements using CSS. The reason I like this is because by using the CSS background property, I can enrich pages, keeping decorative, nonessential graphics separated from the page content and structure.

Swapping out, adding, or removing these images becomes quick and easy when we don't have to touch the markup to make those updates.

For definition lists, it can be fun to add a small arrow icon pointing from the term down to the description. We can add this in easily with the following CSS rules.

 dt {   font-weight: bold;   } dd {   margin-left: 15px;   padding-left: 15px;   color: #999;   background: url(dd_arrow.gif) no-repeat 0 2px;   } 

What we've done here is close in the default indentation for <dd> elements a bit by saying margin-left: 15px;. Next, we've changed the color of the descriptions to gray to further set it off from the <dt> element. A small orange arrow icon was added to sit to the left and 2 pixels down from the top of the description, as well as 15 pixels of padding on the left to let the icon show through. The results can be seen in Figure 8-8.

Figure 8-8: A definition list with a background image denoting the relationships

As you can see, using the definition list structure, we can easily style each piece uniquely, creating a richer design—without touching the markup at all. We can also rest assured that nonstyled viewers will display the same list in a readable, organized fashion as well.

Other Applications

It's important to point out that the uses for definition lists go further beyond just term/description pairs. Definition lists can be used for dialog, navigation, and even form layouts.

We can even quote the W3C on how they define definition lists in the HTML 4.01 Specification (www.w3.org/TR/html4/struct/lists.html):

"Definition lists, created using the <dl> element, generally consist of a series of term/ definition pairs (although definition lists may have other applications)."

Don't be afraid to use definition lists for purposes other than common term/description pairings.

---