html - 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.