20

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.

  • A <footer /> is clearly not appropriate ("The footer element is not sectioning content; it doesn't introduce a new section.")
  • Disqus uses async JavaScript to create an <iframe /> to contain the comment widget, so a <p /> doesn't seem appropriate, either.

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

msanford
  • 11,803
  • 11
  • 66
  • 93

2 Answers2

24

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>
unor
  • 92,415
  • 26
  • 211
  • 360
  • Thanks unor. I wonder why the comments title is enclosed with an `

    ` while the article's title is enclosed within an `

    `; that seems wrong to me (they could very well *both* be `

    `s though). Also, I had considered putting the "posted on" data within a `
    ` (but at the top of the article, as you suggest) but even the spec on `
    ` you link puts it in the `
    `, while the specs suggest that footer might well be more appropriate. Is there a semantic advantage to putting it in a `
    `?     – msanford Oct 01 '12 at 16:02
  • @msanford: Regarding the headings: it doesn't matter which level you choose, the first heading (no matter the level) will be the heading of the section. Typically, you'd always use `h1`, or you'd use the level corresponding to the overall outline. So yes, it's not very good style to mix this; I updated the code in my answer. – unor Oct 01 '12 at 20:41
  • @msanford: Regarding `footer` vs `header`: I think we should use the elements according to the *normative* definition in the specification, not the *informative* examples. Because the *normative* information is what all the other entities (screenreaders, search engines, …) will (or better: should) use to program their software. However, this very case (the difference between `footer` and `header`) is not perfectly clear. So I wouldn't say it's an *error* to use `header` for publication date. – unor Oct 01 '12 at 20:46
9

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thanks BoltClock. I had considered putting it in its own `
    `, but I hadn't considered putting it outside the `
    ` as its sibling. That might be a perfect solution! I don't however think that `` would be appropriate, because ("The aside element represents a section of a page that consists of content that is *tangentially related* to the content around the aside element, and which could be considered separate from that content." (http://dev.w3.org/html5/spec/the-aside-element.html#the-aside-element).     – msanford Sep 28 '12 at 16:25