blog-quote-examples

Blog Quote Examples

What are the best practices (and ideal examples?) of how to markup a blog quote with semantic XHTML?

Authors

• Tantek Çelik

Background

One of the examples in the recent presentation The Elements of Meaningful XHTML at WebEssentials05 touches on this:

<p><cite>Eric Meyer</cite> wrote:</p>
<blockquote cite="http://meyerweb.../social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

But this example of course only illustrates proper use of the <cite> tag and cite attribute -- to keep the example simple (i.e. small enough to fit on a slide, note the ellipsised URL in the cite attribute) it omits hyperlinks to the author and the quoted blog post.

Deeje of Macromedia pointed out that nowhere in this markup did it actually user visibly *link* to the blog post, which makes it not particularly user friendly.

http://blog.deeje.tv/musings/2005/09/proper_xhtml_ma.html

He's right of course, and I followed up here:

http://tantek.com/log/2005/09.html#deeje

- Tantek

Problem

So what are "best practices" for semantically marking up a blog quote?

Are they merely proper uses of XHTML elements? (as implied in the preso)

Or is there enough of a pattern here to consider an XHTML compound?

Or perhaps enough to warrant a microformat? (my intuition tells me no, yet it is perhaps still worth at least asking the question).

I've started this page to document the various examples and "best practices". Please feel free to offer yours, or improve upon what you see there.

Examples / Suggestions

Just add links

The obvious thing is to at least link the blogger and the blog post.

<p><cite><a href="http://meyerweb.com/">Eric Meyer</a></cite>
<a href="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/"> wrote</a>:
</p>
<blockquote cite="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Perhaps add some microformats too

Clearly we are referring to a person which makes sense to represent using an hCard and we are linking to a person, which makes sense to annotate with an XFN relationship.

<p><cite class="vcard">
 <a class="url fn" rel="met friend colleague" 
    href="http://meyerweb.com/">Eric Meyer</a>
</cite>
<a href="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/"> wrote</a>:
</p>
<blockquote cite="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

Additional Thoughts / Improvements

"Wrote" is bad link text. It violates WCAG 1.0 guideline 13.1 that "link text should be meaningful enough to make sense when read out of context". Imagine the page being presented as a list of links, as many audio browsers, and some visual browsers can (e.g. Opera, Amaya) - a page with a lot of quotes would have lots of links labelled "wrote", "wrote", "wrote". Including the title of quoted article gives more meaningful link text.

Also, WCAG 1.0 guideline 10.5 offers a hint for improvement: "until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links".

<p><cite class="vcard">
 <a class="url fn" rel="met friend colleague" 
    href="http://meyerweb.com/">Eric Meyer</a>
</cite>
wrote in
<a href="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/"
rel="cite">Social Protocols</a>:
</p>
<blockquote cite="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/">
<p>
 What's so interesting to me is that the guys who decided 
 to focus on the positive went out and did something; 
 those who want to mix in the negative seem to have 
 nothing to offer except complaints.
</p>
</blockquote>
<p>An excellent contrast between those who want to 
build new things and those who want to tear them down.
</p>

With perhaps a[rel=cite]{font-style:italic} somewhere in your style sheet.