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:

Persons Name
Gravatar Icon
Comment Date
The Comment

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

Comments in ***HTML source*** is different from this, but the search engines can't tell the difference. A starting point may be *[Does HTML5 change the standard for HTML commenting?](https://stackoverflow.com/questions/29405858/)* — Peter Mortensen, Mar 15 '22 at 16:35

score 7 · Accepted Answer · edited Mar 15 '22 at 16:42

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

The link is broken - *"Hmm. We’re having trouble finding that site. We can’t connect to the server at www.fooclass.com."* — Peter Mortensen, Mar 15 '22 at 16:43

score 2 · Answer 2 · edited Nov 30 '16 at 10:50

Here's one way you could do it 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;
}

<div class='comment' id='comment_(comment id #)'>
  <div class='comment_img'>
    <img src='https://placehold.it/100' 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>

score 2 · Answer 3 · edited Mar 15 '22 at 16:41

2

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 shows 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.

edited Mar 15 '22 at 16:41

Peter Mortensen

30,738
21
105
131

answered Aug 07 '08 at 20:16

GateKiller

74,180
73
171
204

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. – Thomas Owens Aug 07 '08 at 20:02

score 1 · Answer 4 · edited Mar 15 '22 at 16:40

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 - see 10.3 Definition lists: the DL, DT, and DD elements.

<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>

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 (Internet Explorer), it would be tougher to style.

score 1 · Answer 5 · answered Aug 07 '08 at 22:07

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.

HTML Comments Markup

5 Answers5