HTML5 Threaded Comments – Article Thumbnail

HTML5 Threaded Comments

Toronto, Ontario by

Back on (2011), I updated my blog with a new design and HTML5 theme. There were a lot of changes I wanted to make to my custom WordPress plugin (which bundles in my custom theme with it) and I also wanted to make sure that apart from using semantic HTML5 markup, that my videos (and audio) played back without requiring a plugin. You can see my first article after the changes, "The 3 Dogs Trailer" to see the HTML5 video in action.

There are a couple HTML5 WordPress themes out there but I really wanted to create my own from scratch. (If you're looking for one, check out Starkers HTML5 v3.0 for starters.) The one thing I wasn't able to find anywhere, though, was a proper implementation of HTML5 comments, especially when it comes to threaded comments. All the more reason to create my own from scratch...

Before creating my theme, I read through "Designing a blog with HTML5" on HTML5Doctor.com and had a real good look at a lot of other blog articles about HTML5. The first HTML5 website I coded was DanielMenjivar.com (my music site) so I already had some experience with HTML5, just not in the context of a blog. (I've written many articles about the process of creating my music website and my article on HTML5 Audio with jQuery still gets a ton of traffic.)

So here's the basic structure that I'm using for the markup of each article:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<article>
    <header>
        thumbnail image
        <h4>article title</h4>
        <time pubdate datetime="YYYY-MM-DDTHH:MM:SS-05:00">Published Date Time Here</time>
    </header>

    <!-- blog article content here... -->

    <footer>
        links to categories, tags, how many comments, etc.
        Last Modified: <time datetime="YYYY-MM-DDTHH:MM:SS-05:00">Last Modified Date Time Here</time>
    </footer>
    <section id="comments">
        <h4>## responses to blog title...</h4>
        <article>
            <header>
                gravatar image
                Comment by (author name)
                <a href="permalink to comment"><time pubdate datetime="YYYY-MM--DDTHH:MM:SS-05:00">Comment Time</time></a>
            </header>

            <!-- comment text here -->

            <footer>
                <a href="reply link for threaded comments">reply button</a>
            </footer>
        </article>
    </section>
</article>
<div id="respond">
    <!-- comment form here -->
</div>

You'll notice that the comment form sits outside of the blog article, but more importantly, all the comments are wrapped in <article> tags and are nested within the main blog article. The spec says:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a Web log entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the Web log entry.

So now when we're talking about threaded comments, those need to be nested articles too, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<article id="alex">
    Alex's comment.
</article>

<article id="bob">
    Bob's comment.
    <article id="cindy">
        Cindy's comment in reply to Bob's comment.
    </article>
</article>

<article id="daniel">
    Daniel's comment.
    <article id="evelyn">
        Evelyn's comment in reply to Daniel's comment.
        <article id="fred">
            Fred's comment in reply to Evelyn's reply to Daniel's comment.
        </article>
    </article>
</article>

Make sense? (I'm not suggesting you use these id's for the comments – it's only for illustration and clarity purposes that I'm doing it here.) Good.

The next step was figuring out how to visually represent this to users (the design part). I frequently come across blogs where the comments are formatted/designed in such a way that you really have to struggle to figure out how to reply to another comment (and not just create a new parent comment). Other times, I see comments organized in such a way that it isn't clear which comments are replying to other comments, and which comments are replying to the main article... Confusing!

So I wanted to design the threaded comments on my blog in such a way that you could tell just by looking at it, and also in such a way that it would encourage people to actually reply to the appropriate comment and not just always create new parent comments if that's not what was intended.

You can have a look at my article on "La Doña Mexican Restaurant" to see an extensive example of these threaded comments in action.

What I did was use opacity (an alpha channel) on the background color of the comments:

1
2
3
4
5
6
7
#comments article {
    background: rgba(192,192,192,0.2);
}

#comments article.byuser {
    background: rgba(161,215,229,0.2);
}

When a comment is replied to (creating a nested/threaded comment), the background opacity of the child comment stacked on top of the parent comment makes it increasingly more opaque... And since IE doesn't support rgba, I'm just adding a left border to each article instead, which creates a look similar to how email replies are commonly formatted:

1
2
3
#comments article {
    border-left: 1px solid #82aeba;
}

Only IE gets the left border from above. All other browsers use the background opacity.

If you found this useful, please consider making a donation to help me pay for web hosting and maintenance costs – thanks!

I think this makes it much easier for readers to see and understand threaded comments.