<p>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?</p>
<p>The information I need to present is:</p>
<ol>
<li>Persons Name</li>
<li>Gravatar Icon</li>
<li>Comment Date</li>
<li>The Comment</li>
</ol>
<p><em>PS: I'm only interested in semantic HTML markup.</em></p>

[{'answer_id': 5235, 'author': 'Rich Reuter', 'author_id': 283, 'author_profile': 'https://Stackoverflow.com/users/283', 'pm_score': 2, 'selected': False, 'text': '<p>Here\'s one way you could do it with the following CSS to float the picture to the left of the contents:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.comment {\r\n  width: 400px;\r\n}\r\n\r\n.comment_img {\r\n  float: left;\r\n}\r\n\r\n.comment_text,\r\n.comment_meta {\r\n  margin-left: 40px;\r\n}\r\n\r\n.comment_meta {\r\n  clear: both;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=\'comment\' id=\'comment_(comment id #)\'&gt;\r\n  &lt;div class=\'comment_img\'&gt;\r\n    &lt;img src=\'https://placehold.it/100\' alt=\'(Commenter Name)\' /&gt;\r\n  &lt;/div&gt;\r\n  &lt;div class=\'comment_text\'&gt;\r\n    &lt;p&gt;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.&lt;/p&gt;\r\n    &lt;p&gt;Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. &lt;/p&gt;\r\n  &lt;/div&gt;\r\n  &lt;p class=\'comment_meta\'&gt;\r\n    By &lt;a href=\'#\'&gt;Name&lt;/a&gt; on &lt;span class=\'comment_date\'&gt;2008-08-21 11:32 AM&lt;/span&gt;\r\n  &lt;/p&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 5248, 'author': 'Rich Reuter', 'author_id': 283, 'author_profile': 'https://Stackoverflow.com/users/283', 'pm_score': 1, 'selected': False, 'text': '<p>I don\'t know that there\'s markup that would necessarily represent the comment structure well without using <em>divs</em> or classes as well, but you could use definition lists. You can use multiple <em>dt</em> and <em>dd</em> tags in the context of a definition list - see <em><a href="http://www.w3.org/TR/html401/struct/lists.html#edef-DL" rel="nofollow noreferrer">10.3 Definition lists: the DL, DT, and DD elements</a></em>.</p>\n<pre><code>&lt;dl&gt;\n  &lt;dt&gt;By [Name] at 2008-01-01&lt;dt&gt;\n  &lt;dd&gt;&lt;img src=\'...\' alt=\'\'/&gt;&lt;/dd&gt;\n  &lt;dd&gt;&lt;p&gt;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.&lt;/p&gt;\n\n      &lt;p&gt;Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rhoncus accumsan velit. Donec varius magna a est. &lt;/p&gt;\n  &lt;/dd&gt;\n&lt;/dl&gt;\n</code></pre>\n<p>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 (<a href="https://en.wikipedia.org/wiki/Internet_Explorer" rel="nofollow noreferrer">Internet\xa0Explorer</a>), it would be tougher to style.</p>\n'}, {'answer_id': 5256, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 2, 'selected': False, 'text': "<p>I was perhaps thinking of something like this:</p>\n<pre><code>&lt;ol class=&quot;comments&quot;&gt;\n    &lt;li&gt;\n        &lt;a href=&quot;&quot;&gt;\n            &lt;img src=&quot;&quot; alt=&quot;&quot; /&gt;\n        &lt;/a&gt;\n        &lt;cite&gt;Name&lt;br /&gt;Date&lt;/cite&gt;\n        &lt;blockquote&gt;Comment&lt;/blockquote&gt;\n    &lt;/li&gt;\n&lt;/ol&gt;\n</code></pre>\n<p>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.</p>\n"}, {'answer_id': 5293, 'author': 'Rich Reuter', 'author_id': 283, 'author_profile': 'https://Stackoverflow.com/users/283', 'pm_score': 4, 'selected': True, 'text': '<p>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.</p>\n<p>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.).</p>\n<p>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 - <a href="http://www.fooclass.com/plain_old_semantic_html" rel="nofollow noreferrer">http://www.fooclass.com/plain_old_semantic_html</a></p>\n'}, {'answer_id': 5392, 'author': 'helloandre', 'author_id': 50, 'author_profile': 'https://Stackoverflow.com/users/50', 'pm_score': 1, 'selected': False, 'text': '<p>I see your point. OK, after reading through that article, why don\'t you try something like this?</p>\n\n<pre><code>&lt;blockquote \n    cite="http://yoursite/comments/feederscript.php?id=commentid" \n    title="&lt;?php echo Name . " - " . Date ?&gt;" &gt;\n    &lt;?php echo Comment ?&gt;\n&lt;/blockquote&gt;\n</code></pre>\n\n<p>with some snazzy CSS to make it look nice.</p>\n\n<p>feederscript.php would be something that could read from the database and echo only the commentid called for.</p>\n'}]
['https://Stackoverflow.com/questions/5226', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/383/']