htmlsemantic-markup

In which element should I enclose an <article />'s comments?


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 <article /> (itself within a <section />), fairly simple:

  <article class="post">
    <header>
      <h2>Title</h2>
      <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>
    <!-- blog comments -->
  </article>

With the above structure, I'm unsure semantically where to integrate the article's comments.

Am I over-thinking the semantic markup thing: is it best to just stick it into a <div /> and not worry about it?


Solution

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