Last year, I looked at how the markup for tag clouds was generally terrible. I thought this year I would look not at a method of marking up a common module, but instead just at a simple part of HTML and how it generally gets abused.
No, not tables. Definition lists. Ah, definition lists. Often used but rarely understood.
Examining the definition of definitions
To start with, let’s see what the HTML spec has 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 canonical example of a definition list is a dictionary. Words can have multiple descriptions (even the word definition has at least five). Also, many terms can share a single definition (for example, the word colour can also be spelt color, but they have the same definition).
Excellent, we can all grasp that. But it very quickly starts to fall apart. Even in the HTML specification the definition list is mis-used.
Another application of
DL, for example, is for marking up dialogues, with eachDTnaming a speaker, and eachDDcontaining his or her words.
Wrong. Completely and utterly wrong. This is the biggest flaw in the HTML spec, along with dropping support for the start attribute on ordered lists. “Why?”, you may ask. Let me give you an example from Romeo and Juliet, act 2, scene 2.
<dt>Juliet</dt>
<dd>Romeo!</dd>
<dt>Romeo</dt>
<dd>My niesse?</dd>
<dt>Juliet</dt>
<dd>At what o'clock tomorrow shall I send to thee?</dd>
<dt>Romeo</dt>
<dd>At the hour of nine.</dd>
Now, the problem here is that a given definition can have multiple descriptions (the DD). Really the dialog “descriptions” should be rolled up under the terms, like so:
<dt>Juliet</dt>
<dd>Romeo!</dd>
<dd>At what o'clock tomorrow shall I send to thee?</dd>
<dt>Romeo</dt>
<dd>My niesse?</dd>
<dd>At the hour of nine.</dd>
Suddenly the play won’t make anywhere near as much sense. (If it’s anything, the correct markup for a play is an ordered list of CITE and BLOCKQUOTE elements.)
This is the first part of the problem. That simple example has turned definition lists in everyone’s mind from pure definitions to more along the lines of a list with pre-configured heading(s) and text(s).
Screen reader, enter stage left.
In many screen readers, a simple definition list would be read out as “definition term equals definition description”. So in our play excerpt, Juliet equals Romeo! That’s not right, either. But this also leads a lot of people astray with definition lists to believing that they are useful for key/value pairs.
Behaviour and convention
The WHAT-WG have noticed the common mis-use of the DL, and have codified it into the new spec. In the HTML5 draft, a definition list is no longer a definition list.
The
dlelement introduces an unordered association list consisting of zero or more name-value groups (a description list). Each group must consist of one or more names (dtelements) followed by one or more values (ddelements).
They also note that the “dl element is inappropriate for marking up dialogue, since dialogue is ordered”. So for that example they have created a DIALOG (sic) element.
Strange, then, that they keep DL as-is but instead refer to it an “association list”. They have not created a new AL element, and kept DL for the original purpose. They have chosen not to correct the usage or to create a new opportunity for increased specificity in our HTML, but to “pave the cowpath” of convention.
How to use a definition list
Given that everyone else is using a DL incorrectly, should we? Well, if they all jumped off a bridge, would you too? No, of course you wouldn’t. We don’t have HTML5 yet, so we’re stuck with the existing semantics of HTML4 and XHTML1. Which means that:
- Listing dialogue is not defining anything.
- Listing the attributes of a piece of hardware (resolution = 1600×1200) is illustrating sample values, not defining anything (however, stating what ‘resolution’ actually means in this context would be a definition).
- Listing the cast and crew of a given movie is not defining the people involved in making movies. (Stuart Gordon may have been the director of Space Truckers, but that by no means makes him the true definition of a director.)
- A menu of navigation items is simply a nested ordered or unordered list of links, not a definition list.
- Applying styling handles to form labels and elements is not a good use for a definition list.
And so on.
Living by the specification, a definition list should be used for term definitions – glossaries, lexicons and dictionaries – only.
Anything else is a crime against markup.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
05/12/2007
Many thanks for the article. An interesting read, although I have some issue with the conclusions you reach.
What about a list of calendar items, for example? I would be tempted to use dt for dates and dd for events on those dates. Yet this seems to go against the HTML5 spec in that it is ordered, and “events don’t equal dates,” they describe them (what else is a date but the sum of things happening on that date?).
This seems to be a shame, as <dt>December 25th</dt> <dd>Christmas Day</dd> Seems much better to me than <li><em>December 25th</em> Christmas Day</li>. While both let you style date and event with CSS, the DL actually explains the relationship between the two elements.
Vote Helpful or Unhelpful
05/12/2007
Someone should tell 37signals – their Bascamp login page uses definition lists for the label/input pairings.
They’re probably too busy telling us all to Get Real or something to use proper markup…
Vote Helpful or Unhelpful
05/12/2007
I understand your sentiment here, but wonder if it’s over-zealous.
For pair values like the attributes of a piece of hardware (your example), what markup would you suggest is used? There’s no HTML tag that properly covers that kind of requirement, so doesn’t it make sense to use the closest fit, even if a strict interpretation says that it’s wrong?
Isn’t using a <dl> less wrong than the alternatives? – and under the not-very-semantic-overall HTML4, isn’t that often the best we can aim for?
Vote Helpful or Unhelpful
05/12/2007
Hi, this might not make the “best comment list” but I justed wanted to say that if you’ve feedback on HTML5 you might want to give it on one of the mailing lists (public-html@w3.org or whatwg@whatwg.org). Publishing a series of articles is also fine and I hope we can locate them all, but such feedback is easier to get lost and usually gives less oppertunity for a conversation. Thanks!
Vote Helpful or Unhelpful
05/12/2007
If you’re talking about the HTML 4 specification, then—as you mention yourself—we can use definition lists for dialogue as well.
Surely tying your conclusion to the spec isn’t helpful when you’re arguing that the spec is bad?
Vote Helpful or Unhelpful
05/12/2007
Interesting stuff. I’ve decided to post my own thoughts on the subject. Do you have any real-world examples of definition list usage that you’re in agreement with?
Vote Helpful or Unhelpful
05/12/2007
First of all I’m not a native speaker so sorry for my bad english ;)
How do you think one should handle key/value pairs now in HTML4/XHTML1? I just have an unpleasant feeling when I use two column tables for this purpose. Definition lists seem to be the right option in this case.
Vote Helpful or Unhelpful
05/12/2007
I’ll be the first to raise my hand and admit I am guilty of using it for other purposes. You do a great job of really defining its proper uses and contexts.
What you say makes perfect sense, and if we really break down the semantics of the tag, its spec and suggested uses, and its potential abuses – it really lets us examine the right tag for the right job. The response from the screen reader is a sure sign that certain things simply wouldn’t work with a key/value pair, as suggested by many.
Thank you.
Vote Helpful or Unhelpful
05/12/2007
Mark, you seem have a very narrow definition of “definition”. In my mind, listing the cast and crew of a movie using a definition list is perfectly valid in certain contexts, such as an IMDB entry for the movie. So, for 2001: A Space Oddesy, Stanley Kubrik is the definition of director, in the context of this movie.
The key here is context.
Vote Helpful or Unhelpful
05/12/2007
Apart from a couple of obviously actual definition lists, my only use of dl is for a FAQ, where I think having the answer as a definition for the question is fair. And I just mentioned it to Norm and he didn’t kill me, so I think that’s good enough for me :)
Vote Helpful or Unhelpful
06/12/2007
I am in favour of widening the semantic usage of the definition list as per the HTML 5 spec. Being overly restrictive about the context in which a tag can be used – basically arguing for an extremely literal interpretation of the words “definition”, “term” and “description” – will ultimately make the web less semantic rather than more, as people reach for even clumsier alternatives.
The definition list is the best option HTML offers for marking up name/value pairs, and such use is entirely consistent with both existing and future specifications. Norm’s deconstruction of how it doesn’t actually work for dialogue – as suggested by the example in the HTML4 spec – is excellent, but I agree with other commenters that using it to mark up the cast and crew of a movie (director equals Stanley Kubrick), or for a product specification (resolution equals 1024 × 768) is entirely appropriate and should be encouraged.
Put simply ‘Director’ is a term, and ‘Stanley Kubrick’ describes the Director of the movie 2001: A Space Odessey. Maybe not what your high school English teach was after when she asked for something descriptive (by which she probably meant poetic), but it is a description nonetheless. The dl is also excellent in this context as there can be multiple directors marked up with multiple dds, or one person can fulfil several functions – writer, director, producer – and so be marked up with multiple dts. A dl is therefore a vastly superior choice than alternatives such as heading + paragraph, lists with semi-semantic elements like em or strong, or a table with headings.
One problem with the historic HTML specs is the inbalance in what can be marked up semantically and what can’t. This confuses newer coders, as with the very best of intentions they search for a semantic element which simply doesn’t exist, and fuels HTML’s detractors who can rightly point out it’s limitations as a semantic markup language. An approach which encourages the semantic use of tags which we already have will utlimately be beneficial to the adoption of semantic HTML.
Vote Helpful or Unhelpful
13/12/2007
I have to agree with Sophie on this one. I’m “guilty” of using def lists for all sorts of name/value pairings, usually when marking up addresses (House/#, Street/Name, Country/Name, etc) but I feel this is an entirely reasonable use of the construct in that context. Note that word “context” again.
I try to use precise semantic markup to the best of my knowledge and ability, but getting hung up on the precise meaning of the words “definition list” and therefore reducing the availability of the DL is taking things a little far, especially given the other options open to us.
Vote Helpful or Unhelpful
16/06/2009
Thanks for writing this up. I was about to mark up some links that had headings as a definition list, but have now been persuaded against it. I’ll see what I can do with the ul.
Vote Helpful or Unhelpful
Impress us