Issue
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?
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>
Answered By - unor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.