Comments in HTML5

by Curtiss   |   last updated May 16, 2011   |   Web Tutorials ·

As we’ve discussed on this blog in the past, HTML5 introduces a lot of new elements that are intended specifically to imply semantic information. One of the elements being introduced is the <article> element.

For the most part, the <article> element is supposed to denote a block of information that can stand on its own (essentially, the main content of the page or post). When developing a blog template. The spec currently describes the <article> element with the following verbiage:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

In my mind, it seems like only the page content (or the article content) would qualify under most circumstances to stand on its own without the context of any other element on the page.

However, there is another application for the <article> element that might not be quite so obvious: comments. That’s right, comments and replies are supposed to be wrapped in their own <article> tags. Although I can’t envision too many comments or replies that would be able to stand on their own without the context of the surrounding content. However, that’s what the spec implies right now.

The one major difference, though, is that comments and replies are supposed to be <article> elements nested inside of a higher-level <article> element. Any time an <article> is nested inside of another <article>, the inner element will be considered to be a reply or comment on the outer element.

Therefore, when marking up the structure of a Web page — especially a blog article — you would most likely use nested <article> elements. The outermost <article> element would wrap the entire content area (the title, the content of the post, plus all comments and meta information about the post). Then, each individual comment on the post would be wrapped inside of another <article> tag. If someone replies to a comment, that reply would occur inside of that comment’s <article> element, wrapped in its own <article> tag. The mark-up for a blog post with one comment and one reply to that comment, might look something like:

<article>
	<hgroup>
    	<h1>Title of Post</h1>
        <h2>Subtitle of post</h2>
    </hgroup>
    <p>This is some content for the post.</p>
    <section class="comments">
    	<h1>Discussion:</h1>
        <article>
        	<h1>Comment title</h1>
            <p>This is a comment on the article.</p>
            <article>
            	<h1>Re: Comment title</h1>
                <p>This is a reply to the comment above.</p>
            </article>
        </article>
    </section>
</article>