Anthology of Ideas

XHTML specifications provide three types of lists ordered lists

, unordered lists
and definition lists

. Ordered lists are meant for content that must be arranged in a specific order — things like instructions, or lines of code. Unordered lists are meant to be used for content that can reasonably be displayed in any order such as navigation menus or shopping lists. The rarely used definition lists is meant to be used where one list item is logically defined by a subsequent item (a definition term

followed by a definition description

) it functions the same way as a FAQ or glossary. However, when specifically used for comments, the only sure bet is that the unordered list is inappropriate — because comments require a specific order to make sense — while the ordered list and definition list vie for being the second worst. (Note I didn’t say best because neither is really qualified.) So this post will try to iron out the argument a bit.

Some things the remember: all lists are block level elements which means they can contain almost any other element and still retain validity.

Definition lists

Definition lists do not seem to be the appropriate element because a comment is not strictly a definition, however, if you take the W3C’s name for the dd element, (definition description) it appears that it could also be used for comment lists. Structurally, however, the definition list fits perfectly with the standard comment.

</p> <dl> <dt>John posted the following on 12/9/2007</dt> <dd> <p>Wow, what a great list example.</p> </dd> <dt>Aaron posted the following on 13/9/2007</dt> <dd> <p>Why thank you.</p> </dd> <dt>John posted the following on 12/9/2007</dt> <dd> <p>You are very welcome. The list is flawless.</p> </dd> </dl> <p>

Wow, that is almost perfect. The commenter’s information is the term and the thoughts are described in the comment. it is almost too perfect, and here is where it breaks down.

1) Structurally, and semantically you can’t have the comment on top and the author’s information on the bottom. The following is just a pile of invalid tags. It has no semantic meaning, unless you are playing a game of jeopardy, and structurally it is invalid.

</p> <dl> <dd> <p>Wow, what a great list example.</p> </dd> <dt>John posted the above on 12/9/2007</dt> <dd> <p>Why thank you.</p> </dd> <dt>Aaron posted the above on 13/9/2007</dt> <dd> <p>You are very welcome. The list is flawless.</p> </dd> <dt>John posted the above on 12/9/2007</dt> </dl> <p>

2) You can’t logically nest

/

combinations inside each other, so you can’t have threaded comments.

3) The use of

tags to hold citation information is sketchy at best, although the

tag is defined as a description, it is rather a stretch to ignore the definiton part of it.

4) Thee is nothing in the standards that require terms to be in a specific order.

So it isn’t possible to use

’s and still retain both structural and semantic validity. However, we do know that comments are a list, so this just leaves unordered lists.

Ordered Lists

If your comments are “flat” (only one level of comments, no parent/children pairs) then the ordered list seems to make the most sense if you want numbers to be automatically generated. However, for sites that allow threading, like this one, the numbers must be hidden.

Now in a typical comment list we have:

</p> <ol> <li> <div>John posted the following on 12/9/2007</div> <div> <p>Wow, what a great list example.</p> </div> </li> <li> <div>Aaron posted the following on 13/9/2007</div> <div> <p>Why thank you.</p> </div> </li> <li> <div>John posted the following on 12/9/2007</div> <div> <p>You are very welcome. The list is flawless.</p> </div> </li> </ol> <p>

The greatest strength of using the ordered list is it nests flawlessly:

</p> <ol> <li> <div>John posted the following on 12/9/2007</div> <div> <p>Wow, what a great list example.</p> </div> <ol> <li> <div>Aaron posted the following on 13/9/2007</div> <div> <p>Why thank you.</p> </div> <ol> <li> <div>John posted the following on 12/9/2007</div

<div> <p>You are very welcome. The list is flawless.</p> </div> </li> </ol> </li> </ol> </li> </ol> <p>

Although the markup by hand can appear to be a little convoluted, it is a perfect nested list and semantically it demonstrates inheritance and means exactly what we want it to mean. Now the problem with this, is that semantically the content of the

’s don’t have any meaning even though the relationship between the two items is defined by using an ordered list. To create a semantically valid ordered list we can replace the two divs with elements that are a little more semantic.

</p> <ol> <li> <cite>John posted the following on 12/9/2007</cite></p> <blockquote><p>Wow, what a great list example.</p> </blockquote> </li> <li> <cite>Aaron posted the following on 13/9/2007</cite></p> <blockquote><p>Why thank you.</p> </blockquote> </li> <li> <cite>John posted the following on 12/9/2007</cite></p> <blockquote><p>You are very welcome. The list is flawless.</p> </blockquote> </li> </ol> <p>

Now this version is better: The cite tag works because it is not only citing the person who said it but also when they said it, and no meaning is lost if you move the cite tag below the blockquote, but I think the blockquote may be inappropriate because while the person is saying it, we aren’t quoting them. However if in the example were quoted in the second, the blockquote would be appropriate (although we can ignore the fact that the would have been more appropriate.)

Now because I hate to introduce presentational elements back into it, I think that if there needs to be an element wrapping the content of the comment, it should be a blockquote because yes technically it is a quote and if the page were to appear in a print edition it would be treated as a quote, but I don’t think it isn’t seen that way by most people.

However, we still need to format the content inside the li a little better. The previous example gets it almost correct, but the cite element really is being used incorrectly.

</p> <ol> <li> <p><cite>John</cite> posted the following on 12/9/2007</p> <p>Wow, what a great list example.</p> </li> <li> <p><cite>Aaron</cite> posted the following on 13/9/2007</p> <p>Why thank you.</p> </li> <li> <p><cite>John</cite> posted the following on 13/9/2007</p> <p>You are very welcome. The list is flawless.</p> </li> </ol> <p>

Much better, theoretically we could be using a tag instead of a

tag, but we would have to put the inside of a &ltp> anyway, and with the addition to style information to the

tag containing the author information, the content will be both symantically and structurally valid. As a final note, although I ragged on using structural elements quite a lot, but they aren’t always bad. I do use them on this site to wrap single comments when needed (because comments are nested, so a style applied to one comment applies to all.)

So what did we learn here?

1. Ordered lists should always be used for comments (but dl lists may be valid for other types of dialog)
2. ’s and ’s should never be used to hold comment information because there are elements that are much better suited to it.
3. If you need a block level element to hold your comment text, use a

   it may require a little extra effort to style correctly, but it is always better to do things the right way.