The Definition List Tag (DL)

I spotted a new tag today that I had no idea even existed. A definition list tag - <dl>. Apparently, it works just like other list tags like unordered list <ul> or the order list tag <ol>. The supporting elements are the definition term tag <dt> and the definition description tag <dd>. Whereas you might put together an ordered list as follows:

<ul>
 <li>Ordered List</li>
 <li>Unordered List</li>
 <li>Definition List </li>
</ul>

Which would produce this:

• Ordered List
• Unordered List
• Definition List

Or maybe an ordered list -

<ol>
 <li>Ordered List</li>
 <li>Unordered List</li>
 <li>Definition List </li>
</ol>

1. Ordered List
2. Unordered List
3. Definition List

The Definition List provides a little bit more to the structure -

<dl>
 <dt>Ordered List</dt>
  <dd>A bullet pointed list</dd>
 <dt>Unordered List</dt>
  <dd>A numbered bullet point list</dd>
 <dt>Definition List </dt>
  <dd>A bullet pointed list with descriptions of each bullet point</dd>
</dl>

Ordered List

A bullet pointed list

Unordered List

A numbered bullet point list

Definition List

A bullet pointed list with descriptions of each bullet point

You could hack away to get the same effect using nested lists - and in fact, that's what I've been doing for quite some time. But this particular find is a nice one I think - it provides a little bit more of a logical layout and it also allows you to separate css definitions within your site for various different types of lists. That way you aren't tied to css definitions that are based on certain parent child relationships.

It also makes perfect sense for a glossary system that I'll be putting some time into developing - what better way to display definitions than a definition list?

By the way, the syntax highlighting is the result of a utility I'm working on right now. I think it turned out pretty well, but it did point out to me that there's much more work to do before initial release. More on the utility later.