How should user comments be marked up in HTML5?
HTML5 web · 5 comments · 900 words · read ~300 times.
This is quite the epitome of yak-shaving!
Suppose you have an article written in HTML. The basic layout might be something like:
HTML
<body>
<main>
<article>
The content of your article
...
Pretty standard. Now suppose you let users add comments to the article. I have two questions:
- Where in the tree should they go?
- What HTML element should be used to group them?
It is, I think, a question where reasonable parties can justifiably come to distinctly different conclusions.
Where?
Are comments a part of the article or are they apart from the article?
If you wrongly think that user-generated content is indivisible from the text of the article, then the answer is:
<body>
<main>
<article>
The content of your article
<div>
Comments
If, however, you're fool enough to believe that commentary is separate from what is commented on, then you'll probably pick:
<body>
<main>
<article>
The content of your article
</article>
<div>
Comments
Some idiots will insist that comments shouldn't even be considered next to the purity of the content of <main>. Hence:
<body>
<main>
<article>
The content of your article
</article>
</main>
<div>
Comments
As ever, let us see what wisdom the HTML editors passim have given us.
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 blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry. 4.3.2 The article element
Ah! This is evidence that comments should be inside the article itself.
The code they give is (simplified):
<article>
<h1>Page Heading</h1>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<p>Comment text</p>
</article>
But, that's not the whole story!
A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent". […] A comment on an article is not part of the article on which it is commenting, therefore it is its own article. 4.3.12.1 Article or section?
Although that section is non-normative, I think it is instructive.
The article is its own thing. A comment may relate to an article, but it is not part of the article. Therefore, it's perfectly reasonable to place the comments outside the original article.
What?
Ideally, there would be a <comment> element. There isn't.
As shown in the above code example, comments can be enclosed in a <section> element. And each comment itself can be wrapped in an <article>.
article
A complete, or self-contained, composition in a document, page, application, or site […] This could be a forum post, […] a blog entry, a user-submitted comment […] or any other independent item of content. Article Usage Summary
I had thought the <aside> element might also be suitable. It represents:
content that is tangentially related to the content around the aside element, and which could be considered separate from that content.
Are comments tangentially related? Not really. And comments don't generally appear inside the thing they're commenting on. So I discarded that idea.
Why is this important?
It isn't, really. Good semantic metadata should make clear what is content and what is commentary.
But not everyone consumes metadata. Bots, scrapers, and search engines should have a sensible way of heuristically determining what is relevant to them based on the markup of the document. Unless we get a new <comment> element, we need to provide hints to user-agents about exactly what we mean.
I took an extremely scientific poll on Twitter to see if my acolytes agreed with me.
So, <section> wrapped around a group of <article>s, all of which are outside the <article> being discussed seems to me to be a sensible way to demarcate content from commentary. Leaving us with:
<body>
<main>
<article>
The content of your article
</article>
<section>
<h1>Comments</h1>
<article>
Comment
</article>
<article>
Comment
</article>
</section>
</main>
</body>
Do feel free to tell me I'm wrong in the comments. The box is down there, somewhere…
Haha good luck on that one @edent. Especially because you totally forgot about microformats where you want the comments within the h-entry but outside of summary and content 😀
@Edent whichever tree the yak is eating?
https://schema.org/UserComments
@edent says:
Not quite. If you visit that link, you'll see:
All of the comments on this site have https://schema.org/Comment metadata instead.
Harsh Dadhania says:
My Preference:
I think comments are part of an article as they are closely related to the specific article. so I left comments inside the article element but within the section element to group them. If I wrap each comment inside an article element then it means each comment is distributable independently and still self-contained, which is not possible as each comment is related to the topic of an article. so I decided to wrap each comment within div.
So, given HTML structure aligns best according to semantic meaning.