blog-quote-examples - Revision history

TobyInk: /* Additional Thoughts / Improvements */ "wrote" is bad link text

2008-06-24T06:55:26Z

Additional Thoughts / Improvements: "wrote" is bad link text

← Older revision		Revision as of 06:55, 24 June 2008
Line 99:		Line 99:
	=== Additional Thoughts / Improvements ===		=== Additional Thoughts / Improvements ===

	~~How else~~ can ~~this be improved?~~		"Wrote" is bad link text. It violates [http://www.w3.org/TR/WCAG10/ 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, [http://www.w3.org/TR/WCAG10/ 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".

			<pre><nowiki><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></nowiki></pre>

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

Tantek: /* Blog Quote Examples */

2005-11-22T04:12:42Z

Blog Quote Examples

← Older revision		Revision as of 04:12, 22 November 2005
Line 2:		Line 2:

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

			== Authors ==

			* [http://tantek.com/log/ Tantek Çelik]

	== Background ==		== Background ==

Tantek at 03:49, 22 November 2005

2005-11-22T03:49:25Z

New page

= Blog Quote Examples =

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

== Background ==

One of the examples in the recent presentation [http://tantek.com/presentations/2005/09/elements-of-xhtml/ The Elements of Meaningful XHTML at WebEssentials05] touches on this:

<pre><nowiki>
<cite>Eric Meyer</cite> wrote:
<blockquote cite="http://meyerweb.../social-protocols/">

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.

</blockquote>
An excellent contrast between those who want to
build new things and those who want to tear them down.

</nowiki></pre>

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

- [http://tantek.com/log/ 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.

<pre><nowiki>
<cite><a href="http://meyerweb.com/">Eric Meyer</a></cite>
<a href="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/"> wrote</a>:

<blockquote cite="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/">

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.

</blockquote>
An excellent contrast between those who want to
build new things and those who want to tear them down.

</nowiki></pre>

=== Perhaps add some microformats too ===

Clearly we are referring to a person which makes sense to represent using an [[hcard|hCard]] and we are linking to a person, which makes sense to annotate with an [http://gmpg.org/xfn/ XFN] relationship.

<pre><nowiki>
<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>:

<blockquote cite="http://meyerweb.com/eric/thoughts/2005/03/11/social-protocols/">

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.

</blockquote>
An excellent contrast between those who want to
build new things and those who want to tear them down.

</nowiki></pre>

=== Additional Thoughts / Improvements ===

How else can this be improved?