HTML Comments Markup

Question

I am currently in the process of creating my own blog and I have got to marking up the comments, but what is the best way to mark it up?

The information I need to present is:

1. Persons Name
2. Gravatar Icon
3. Comment Date
4. The Comment

Any idea's would be much appriciated.

PS: I'm only interested in semantic html markup.

Answer 1

Here's one way you could do it:

<div class='comment' id='comment_(comment id #)'>
  <div class='comment_img'><img src='...' alt='(Commenter Name)' /></div>
  <div class='comment_text'>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>

  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
  </div>
  <p class='comment_meta'>By <a href='#'>Name</a> on <span class='comment_date'>2008-08-21 11:32 AM</span></p>
</div>

With the following CSS to float the picture to the left of the contents:

.comment
{
    width: 400px;
}

.comment_img
{
    float: left;
}

.comment_text, .comment_meta
{
    margin-left: 40px;
}

.comment_meta
{
    clear: both;
}

Answer 2

@Gatekiller: From my understanding, class attributes are what leads to semantics. I believe most microformats are implemented as classes and attributes in XHTML, and you don't get much more semantic than that unless you want to embrace RDF and such.

Answer 3

I don't know that there's markup that would necessarily represent the comment structure well without using divs or classes as well, but you could use definition lists. You can use multiple dt and dd tags in the context of a definition list - http://www.w3.org/TR/html401/struct/lists.html#edef-DL

<dl>
  <dt>By [Name] at 2008-01-01<dt>
  <dd><img src='...' alt=''/></dd>
  <dd><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mauris. Morbi quis tellus sit amet eros ullamcorper ultrices. Proin a tortor. Praesent et odio. Duis mi odio, consequat ut, euismod sed, commodo vitae, nulla. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam pede.</p>

  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. </p>
   </dd>
</dl>

Update: The concern I'd have with an approach like this is that it could be difficult to uniquely identify the elements with CSS for styling purposes. You could use JavaScript (jQuery would be great here) to find and apply styles. Without full CSS selector support across browsers (IE), it would be tougher to style.

Answer 4

I was perhaps thinking of something like this:

<ol class="comments">
    <li>
        <a href="">
            <img src="" alt="" />
        </a>
        <cite>Name<br />Date</cite>
        <blockquote>Comment</blockquote>
    </li>
</ol>

It's very semantic without using div's and only one class. The list show the order the comments were made, a link to the persons website, and image for their gravatar, the cite tag to site who said the comment and blockquote to hold what they said.

What do people think?

Answer 5

If i may ask, why so adamant about no divs and classes? They make life a whole lot easier.

Answer 6

@contagious, their not very semantic. They give no meaning to the content held within them. This is a very good article on Semantics.

Basically, the tags you use should give somemeaning to the information within.

I would only resort to divs or spans where there is no html element which fits the bill.

Answer 7

I think that your version with the cite, blockquote, etc. would definitely work , but if semantics is your main concern then I personally wouldn't use cite and blockquote as they have specific things that they are supposed to represent.

The blockquote tag is meant to represent a quotation taken from another source and the cite tag is meant to represent a source of information (like a magazine, newspaper, etc.).

I think an argument can certainly made that you can use semantic HTML with class names, provided they are meaningful. This article on Plain Old Semantic HTML makes a reference to using class names - http://www.fooclass.com/plain_old_semantic_html

Answer 8

I see your point. OK, after reading through that article, why don't you try something like this?

<blockquote 
    cite="http://yoursite/comments/feederscript.php?id=commentid" 
    title="<?php echo Name . " - " . Date ?>" >
    <?php echo Comment ?>
</blockquote>

with some snazzy CSS to make it look nice.

feederscript.php would be something that could read from the database and echo only the commentid called for.

Answer 9

RDFa + SIOC + FOAF?