HTML5 - Correct usage of the <article> tag

Question

Reading an article on the <article> tag on HTML5, I really think my biggest confusion is in the first question of this section:

Using <article> gives more semantic meaning to the content. By contrast <section> is only a block of related content, and <div> is only a block of content... To decide which of these three elements is appropriate, choose the first suitable option:

1. Would the content would make sense on its own in a feed reader? If so, use <article> .
2. Is the content related? If so, use <section> .
3. Finally, if there's no semantic relationship, use <div> .

So I guess my question is really: What types of content belong in a feed reader?

Answer 1

The spec answers this quite clearly:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, eg in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

see: http://dev.w3.org/html5/spec/Overview.html#the-article-element

Answer 2

You've brought up a good argument and yes the spec does rather clearly define <article> as a syndication-worthy collection of content. The way I see it, your article would be the composed blog post – what you as the content writer of the site produce. While comments on that section are related to the article, they are not, in fact, part of the article, and should be relegated to another block in the <section> , either a non-semantic <div> or simply <p> s with display:block set. This is a decision that's left to the designer, depending on how they semantically evaluate the worth of the commentary.

Remember too that you have the <aside> tag, which is almost tailor-made for commentary, whether from the author or from the reader.

Answer 3

The W3C spec leaves a lot open to interpretation and it ultimately comes down to the author's opinion. Here is a short and simple answer in the form of a question:

What are the primary significant pieces of content you want to share on the page?

Here are a few examples:

• On this very page, each answer could be an article.
• On flickr each photo displayed in the photostream could be considered an article.
• On dribbble each shot displayed on the page could be an article.
• On google each search result listed could be an article.
• On a blog each article.. well each article could be an article.
• On a blog page with an article and a series of comments you could have two major sections. One with an article and another for comments in which each comment could be considered an article.

It's the author's discretion as to how far they want to go. Most blog authors have an RSS feed for their articles, but others may also provide feeds for comments, and shared links.

A lot of people have written on this subject. For further information I highly recommend reading:

• http://html5doctor.com/the-article-element/ (you've already shared this)
• http://www.impressivewebs.com/html5-section/
• http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article

Answer 4

Most feed readers can handle many types of content, it could include copy, images, videos, etc. The feed for your will include the content on your site that is repeated or includes multiple versions. A question and answer site will have a feed of new questions. A video sharing site will have a feed of new videos. A software review site will have a feed of new software or new reviews.

I'd recommend considering what the typical consumer of your content would want to find easily in their feed reader. You get to define what types of content belong in a feed reader.

Answer 5

A feed reader, in general, should contain a list of stories. Look at http://google.com/elections/ - it's a good example of the sort of thing a feed reader might contain. The important part is that all the stories are self-contained, and in theory do not need to be related at all.

Answer 6

The markup for that document could look like the following:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

You may find more information in this article on A List Apart .