What is the best HTML5 tag used to mark up blog excerpts?

Question

This is a common template for blogs where there are archive pages (for example, by date or category) that list the relevant blog entries, as well as excerpts (paragraph or) and a link. However, I cannot decide which of the HTML5 elements is best used for individual posts.

The <article> may seem appropriate (and, of course, if you were to display all the content), but I'm not sure if it is suitable for excerpts. The specification says:

An article element is an autonomous composition in a document, page, application or website and, in principle, independently distributed or reused, for example. in syndication.

Is an excerpt truly autonomous and independently distributed part of the content? I'm not sure.

Other options might be <blockquote> tags (but it would be weird to quote your own posts) or just a <ol> list (sorted by publication date) containing headers and paragraphs.

Any thoughts?

Answer 1

I would use:

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

<blockquote> most suitable for this:

The blockquote element is a section that is cited from another source.

The quote itself is not strange. Defining an element does not mean that you should quote someone else. You are quoting a document that lives under a different URL.

I think that <article> (instead of <li> ) would be acceptable, but this is not necessary (the definition of the article is rather weak, it should have been called <infolump> ;)

My litmus test for <article> is whether it will be useful in the RSS / Atom feed, and you can only find feeds with excerpts from the article.

---

The <summary> element is only part of the <details> that has a different purpose.

<aside> describes the role of content within the page. When excerpts are the main part of the archive page, this is not tangential content. OTOH, if it were the See Also section of the message page, then <aside> would be ideal.

Answer 2

I believe that the most semantic way to do this is to use as <article> AND <blockquote> , in combination with <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 consists of what you can expect: headline, content, and some meta. I think this part is pretty straight forward.
However, he also refers to the article, so the content is wrapped in a sample block. He quotes the part of the article to which he cites references. An excerpt is part of the article. A piece that just happens at the beginning.

This method is what I was able to infer from all the documentation and specifications, anyway.

And yes, you can use multiple <h1> tags on the same page if that makes sense. Take a look at http://html5doctor.com/html5-seo-search-engine-optimisation/ :

A new HTML5 algorithm that allows you to select multiple <h1> pages per page. We ask a lot of questions about whether developers will be punished by Google, which, according to the myth, forbade it.

I say “myth” because Google has always allowed multiple <h1> per page, provided that it is organic, and not an attempt to play the system.

Answer 3

<aside> seems appropriate. According to specification:

A deferred element is a section of a page consisting of content that is related to the content around the element aside and which can be considered separate from this content. Such sections are often presented as side printing presses.

In this case, your relevant posts are related to the content of the page. I think that this is exactly the type of content that was intended for supporters.

Answer 4

Definitely not aloof, as excerpts are not related to anything else on the page. This should be an article, I think.

What about <article><summary>Excerpt here</summary></article> ?