Marking up definition lists

A while back, I wrote about marking up lists, and for the most part, that discussion focused on the unordered list tag ul. Of course, much of the discussion applies equally well with the ordered list tag ol, which should be obvious. But there, I’ve said it. Anyway, I kept meaning to talk further about lists, for I’ve yet to discuss the definition list tag dl, the little tag that could all along, but has been all but forgotten by most web developers.

A common scenario: lists with associations between items

Consider for a moment how you might mark up a list where there is some level of association or relationship between items. For example, you may create a list of albums or artists using an unordered list, but would you take the same approach with a list of albums by artist? Well, you say, I can always nest my unordered list. Perhaps, but let me suggest a better alternative that I bet you haven’t considered: using definition lists. A brief example of how I might mark this up is as follows:

1. <dl>
2. <dt>The Beatles</dt>
3. <dd>Abbey Road</dd>
4. <dd>Revolver</dd>
5. <dd>Rubber Soul</dd>
6. <dt>The Rolling Stones</dt>
7. <dd>Aftermath</dd>
8. <dd>Let It Bleed</dd>
9. <dd>Tattoo You</dd>
10. </dl>
11. Download this code: /code/def_list_01.html

Note: it’s the sequence of the dt (term) and dd (definition) tags in the dl (list) that defines the relationship or association, not the hierarchy of these tags, since both the term and definition tags reside at the root of the list tag.

Controversial? Perhaps. Flexible? You bet.

Some may argue that definition lists must consist of a term and a definition. I disagree. What precisely constitutes a term/definition association? Does the above example represent a valid implementation? Yes. Does it provide a better association semantically than, say, a nested unordered list would? Well, we could argue that forever, and not be any further down the road. Suffice it to say that my list example defines artists by the albums they produce.

The consideration here that I really like here is that by default, most browsers will render definition lists by placing the terms and definitions on new lines, while indenting the definitions. Thinking about the lowest common denominator, I like having the flexibility that the three types of lists (ordered, unordered and definition) provide. I think it’s helpful to break up what may otherwise be a repeating chaos of unordered bulleted lists in cases where the intent of the list is associative.

Of course, my argument really assumes that you take care in choosing your markup, and most importantly, that you are consistent in how you apply your choices.

Tip: like the above example illustrates, you can have more than one definition per term. Just thought I’d point that out.

Detour: Headed Lists

Continuing down this path, let’s consider how you might mark up a list that has a heading associated with it. After considering various approaches that look at clean and semantically meaningful markup, you may consider and then eliminate using the first item as the heading, as you probably should. After some thinking, chances are you’ll implement something like this:

1. <h2>Artists</h2>
2. <ul>
3. <li>The Beatles</li>
4. <li>The Rolling Stones</li>
5. </ul>
6. Download this code: /code/def_list_02.html

If you’re like me, this will stick in your craw a bit, because you think of this as a single unit or module, but the implementation requires two independent tags—the h2 and ul.

My advice at the present is to either accept this, or wrap a div around it for containment purposes, and move along. The clever out there may suggest wrapping this implementation in a definition list instead, using the dt for the heading and dd for the list, but although this is certainly appealing, it’s not valid, since the inline dt tag cannot legally contain the block h2 tag.

Update: according to the XHTML 2.0 spec, navigation lists will correct this shortcoming by allowing a label tag to sit among the list items. It’s worth considering in terms of a direction to proceed towards, even though it will be a long time before we get there.

Detour ends

I raise the discussion of headed lists because I think it’s important to consider it as an alternative to using the definition list in the manner I discuss here. To implement our list of albums by artist using nested unordered lists, for example, would require 3 ul tags (instead of 1 dl tag), clearly more bytes. Sadly, for the time being, if the artist needs to be presented as a heading, we’ll have to take the unordered list approach. If not, we can bring the definition list out from the basement of valid tags, and enjoy.

Moving forward

So give some thought to where the use of definition lists may make sense in your markup implementations. I’ve thought a little about them, and think that they may additionally make sense in implementing navigation, though I haven’t played much with that yet. Perhaps once the rain starts falling again…

Next post (newer)

Best practices for keeping CSS files light

Previous post (older)

Verification for Javascript Files