What's the best HTML5 tag to use for marking up blog excerpts?

Question

It's a common pattern for blogs to have archive pages (eg by date or category) which list relevant blog posts, along with excerpts (a paragraph or) and a link. I can't quite work out which of the HTML5 elements it's best to use for the individual posts, however.

The <article> tag might seem like a good fit (and certainly would be if you were displaying the whole content), but I'm not sure whether it's appropriate for excerpts. The specification says:

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.

Is an excerpt really a self-contained and independently distributable piece of content? I'm not so sure.

Other options might be the <blockquote> tag (but it'd be weird to be quoting your own posts), or simply a <ol> list (ordered by publication date) containing headers and paragraphs.

Any thoughts?

Answer 1

I'd use:

 <li>     <blockquote cite="original URL">     </blockquote>  </li> 

<blockquote> is most appropriate for this:

The blockquote element represents a section that is quoted from another source.

Quoting yourself is not weird. The definition of the element doesn't say you have to quote somebody else. You do quote a document that lives under another URL.

I think <article> (instead of <li>) would be acceptable, but it's not necessary (the definition of article is pretty lax, it should have been called <infolump> ;)

My litmus test for <article> is whether it'd be useful in an RSS/Atom feed, and you can find feeds with just article excerpts.

---

The <summary> element is only a part of <details>, which has different purpose.

<aside> describes role of the content within a page. When the excerpts are the main part of archive page, it's not really a tangential content. OTOH if it were a "See also" section on a post page, then <aside> would be perfect.

Answer 2

I believe that the most semantic way of doing it, is to use both <article> AND <blockquote>, combined with an <h1>:

<article>     <h1>Post title here</h1>     <div class="meta">author, date, categories, tags, whatever</div>     <blockquote>         Excerpt     </blockquote>     <a href="/full/article">Read full Post</a> </article> 

The article here, is comprised of what you might expect: heading, content and some meta. So that part is pretty straight-forward I think.
However it also links TO an article, which is why the content is wrapped in a blockquote. It's quoting a piece of the article it links to. An excerpt is a piece of the article. A piece which just happens to be in the beginning.

This method is what I've been able to deduce from all the documentation and the specs, anyways.

And yes, you can use multiple <h1> tags on a single page, as long as it makes sense. Have a look at http://html5doctor.com/html5-seo-search-engine-optimisation/:

The new HTML5 outlining algorithm allows multiple <h1> in a page. We get lots of questions about whether developers will be penalised by Google which, according to myth, disallowed this.

I say “myth” because Google has always allowed multiple <h1> on a page, provided that it’s organic rather than trying to game the system.