In which element should I enclose an 's comments?

Question

I\'m working on a blog that implements Disqus comments and I\'m making an effort to make as much use of HTML5 semantic markups as possible.

Here\'s an example <

Answer 1

You could stick it in its own <section> (rather than a <div>) within your containing <section>, as a sibling of your <article>. But if you're using Disqus, I guess whichever element you use doesn't matter. I don't think it belongs within the article content though. Maybe an <aside> instead?

Just keep in mind that when it comes to semantics, there aren't any hard and fast rules. As long as your document is structured and outlined in a meaningful way, that's what matters.

Answer 2

There is an example in the HTML5 spec for a blog post with comments. Which makes sense, in my opinion.

Your example could look like:

  <article class="post">
    <header>
      <h1>Title</h1>
      <p class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</p>
    </header>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>

    <section>
      <h1>Comments</h1>

      <article><!-- comment 1--></article>
      <article><!-- comment 2--></article>
      <article><!-- comment 3--></article>

    <section>

  </article>

---

Side note: I think your "posted-on" would better fit into a footer instead of a header. So your header could be omitted because it would only contain the heading. So your example could look like:

  <article class="post">

    <h1>Title</h1>

    <footer class="posted-on">Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time>.</footer>

    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>

    <section>
      <h1>Comments</h1>

      <article><!-- comment 1--></article>
      <article><!-- comment 2--></article>
      <article><!-- comment 3--></article>

    <section>

  </article>