How to markup blog comments?

I’m going through the painful process of redesigning my personal site in my spare time…okay, so I don’t really have spare time, but I’m finding a few moments before bed to work on it. I’m trying to make everything semantically correct in terms of the HTML I’m using, with the ultimate goal of top-notch accessibility coupled with top-notch design. Marking up a blog entry was pretty easy, as was the main page design. Then I got to the comments section.

Currently, I use a <h3/> element for the name of the person leaving the comment and a <p/> element (or multiple elements) for the comment body. This seemed logical at the time, but now I’m not convinced. Looking for inspiration, I took to the Web and viewed the source of several standards-aware sites. Here’s what I found:

  • Ajaxian uses a <dl/> element to enclose all comments, a <dd/> element for the comment body, and a <dt/> for the author. The list starts with a <dd/> element, as that comes first in the visual design. I pondered this and ended up with two reasons why I don’t like it: 1) <dl/> is for definition lists not comments, 2) <dt/> is for a definition term and should come before the corresponding <dd/> element, not after it. I know some people use the <dl/> element for dialogues, but HTML 5 says specifically that you should not use this element for dialogues.
  • The Web Standards Project takes a similar approach. They use a <dl/> element, with the first child being a <dt/> which is followed by a <dd/>. At least this is the correct order, but it’s still using <dl/> to mark up comments in the form of a dialogue.
  • A List Apart uses a <h4/> for the comment title and a <p/> for the comment body. There is no list of any form.
  • The YUI Blog uses a <ol/> element to markup the list of comments, an <li/> element for each comment, and then <p/> elements for the comment body. I like using an ordered list, since it indicates that the order of the comments is important and also provides information to screen readers about how many comments there are. I’m not sold on using just <p/> elements for the comment body, though.

Of all the options, I think using <ol/> to enumerate the comments is the right way to go. Having settled on that, I was then left with the question of marking up the comment itself. I really wished there was some markup for representing someone’s written opinion. Just before bed, I was picturing what would happen if a blog post happened in real life and what the conversation would look like. Then I realized something: blog comments really are a conversation. Each comment is made up of something someone said and the person who said it; there are elements for both in HTML 4.

When someone says something and it’s captured for later use, that’s a quote, for which the <blockquote/> element is appropriate. The person who spoke the phrase can be appropriately indicated by <cite/>. These were the final two pieces to the puzzle for me.

So what do you think? Is the combination of <ol/>, <blockquote/>, and <cite/> appropriate? Can you suggest something better?

Comments

  1. Larry Marburger

    I went through the same thing when I was designing my blog and basically came to the same conclusion. I feel that blog comments are definitely an OL as they are ordered by the time entered. To describe the commenter and their comment, I think CITE / BLOCKQUOTE are the only elements that make the most semantic sense.

    Good luck redesigning your blog!

  2. Mike Shaffer

    I think if I were to do it, I'd agree with the OL idea as you've laid out. Not a big fan of using the DD, DL & DT. While they work fine, it always seemed a little like overloading the purpose. But having said that, I also don't think there's anything wrong with the ALA way and just use H's and P tags. Typically wishy-washy endorsement from me.....

  3. Kevin

    I completely agree with you on using cite/blockquote. In fact, on the site my name links to, I use that method for marking up not just comments but actual blog posts too. The reason to mark up blog posts is b/c it's not just me posting, it's more of a group blog. This isn't really necessary if it's just you posting.

    Alas, the one thing I wasn't able to do on the comments is surround them in an OL, mainly because I couldn't figure out how to keep Drupal from adding a heading after the open OL tag.

  4. GTA 4 Mods

    I think http://gta4fans.ru if I were to do it, I'd agree with the OL idea as you've laid out. Not a big fan of using the DD, DL & DT. While they work fine, it always seemed a little like overloading the purpose. But having said that, I also don't think there's anything wrong with the ALA way and just use H's and P tags. Typically wishy-washy endorsement from me

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.