Slightly OT but in your third code block, you use < p class="attribution" > ... < /p > but shouldn’t you use the < cite > tag?

Very cool script, thanks.

I see what you mean, CornedBee, about the tabindex being wrong, it tabs from the label (http://) to the “back to home page link” in the header.

Hmm, I wonder how much of the content which I brough in book-form will appear for free (so soon) after it was published?

The third example which uses class=”attribution”, should be using the cite ELEMENT, and is exactly how I markup my blockquotes already. It might be tedious (not really) to add it manually, but I think it’s important information for the user, regardless of JavaScript. I see a blockquote in an interesting article, I might want to read that site or article.

Jeremy Keith: The cite element is not for quotes. ;-)

That´s great, except for the fact that it´s totally insane to have to script all kinds of workarounds for shitty browsers to even use correct markup, im seriously thinking about going back to tables

Is the cite attribute appropriate to use as a semantic hook for the “posted by…” footer often following a comment on a blog? This page’s example (as well as all others I’ve seen) use it to reference text quoted from an external page, but it always bugs me that I’ve not semantically linked the poster’s name with what they’ve said on my site’s coments… Any thoughts?

Well, it looks a lot like Dunstan Orchard experiments with blockquotes but still useful ;-)

JB: Maybe add a title attribute to the blockquote tag?

http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/text/blockquote.cfm#attributes

OT, but the tab order down here is weird.

To the point. As for the third question (“how would I do that?”):

quote.nextSibling ? quote.nextSibling.insertBefore(cite) : quote.parentNode.appendChild(cite);

To this date, I just use CSS2 generated content for displaying the value of the cite attribute. I don’t make links out of it, partly because on the site where I do this I try to avoid JavaScript even when it’d enhance usability (such as the ability to click or at list copy the link in Mozilla), partly because it’s not always a link – I use the cite attribute for whatever source attribution fits.

What a great idea! I’ve been using blockquotes on a fair few of my latest projects and it always seemed strange that the browser did nothing with the cite property.

BTW, wouldn’t the text in the cite link be better presented with a name or title for the source, for example, “Source: Progressive Enhancement – Wikipedia, the free encyclopedia”?

CornedBee: You’re almost there, but the syntax for insertBefore is actually more complex than that (unnecessarily so in my opinion). But your thinking is spot on: use either insertBefore (if the quote has a nextSibling) or appendChild (if the quote is the lastChild).

Si: Yes, a more descriptive link text would be good. That was why I suggested reusing a quote’s title attribute, if one exists.

I always refused to search for the meaning of blockquote, but today I’ve learned it unintentionaly. Thank you for this explanation!

What about user agents that don’t support JavaScript? (Oh, come on, you knew someone was going to ask.)

Wild idea (well maybe not that wild), but what about turning this into a Greasemonkey script? It is, after all, an attempt to alter the default UI that your browser provides, isn’t it? Hence, a developer shouldn’t necessarily have to account for such preferences. Additionally, there are no doubt a number of sites who may prefer not to display the source (for whatever reason), and a Greasemonkey script would make this preference available to the viewer. Just a thought.

Great article, though, Jeremy. Well done.

Aww yea. Well written in Jeremy fashion. addLoadEvent prevails, and we’ve got a handy new function to handle our blockquotes.

This is great man. Always lookin’ for ways to help us become lazier. I love it.

This is useful, although far from new for anyone who’s been reading about unobtrusive Javascript techniques. Simon Willison published an article about this on Sitepoint two years ago this month.

Jules: You’re quite right. The cite element would be perfect in this context. cite contains a citation or a reference to other sources

Jonathon: Turning this into a greasemonkey script sounds like a great idea! Actually, it probably wouldn’t be that hard to turn into a regular bookmarklet so even non-Firefox uses could enjoy it.

David: I have no idea what on earth you are getting at. What have tables got to do with anything in this example?!

Scott: I never claimed this was anything new. Here’s a quote for you to attribute: There is nothing new under the sun. ;-)

> It might be tedious (not really) to add it manually

Phil Ringnalda calls that markupsturbation. I thought it was appropriate, anyway.

Jeremy, this is the kind of small, useful enhancement for which I love JavaScript and the DOM. In response to a couple of your points:

“Should the text inside the generated link be the URL itself?”

“If the block quote has a title attribute, how would you take its value and use it as the text inside the generated link?”

Using either the URL or the value of a title attribute would be better. Imagine a page with many blockquote elements, each with their own cite attribute citing a different source: then there would be many instances where the same link text (“source” in your example) points to different URLs. This would be bad from an accessibility point of view: think how the Links List would sound in a screen reader (“Source”, “Source”, “Source”, “Source”... with no context).

“Should the attribution paragraph be placed outside the block quote?”

It would be better if it were outside. First, because the attribution is not part of the quotation. Second, in a Note following section 9.2.2, the HTML 4.01 specification says that user agents should not insert quotation marks in the default style for the blockquote element. However, it also recommends that “style sheet implementations provide a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE”. If such an implementation were available and used, then the attribution paragraph would appear before the closing quotation mark, which would look wrong presentationally in addition to being wrong semantically.

CornedBee: I understand your reasoning in using the cite attribute for whatever source attribution fits, even when it is not a link. Indeed, it would seem to me more sensible that the cite attribute could be used that way. However, HTML 4.01 at section 9.2.2 states specifically that the value of the cite attribute is a URI—so technically, anything that is not a URI is not a valid value for cite.

Why use an “attribution” paragraph when you can use an ADDRESS element?

Nice one Jeremy.

There’s also a fun way to do it using generated content in CSS. True, you can’t link it, it is unselectable and it (say it with me now) doesn’t work in IE, but it requires no JS. For example, check out these blockquotes (about 2/3 the way down the page).

this technique improve SEO ?

see ya !

William,

This technique does not produce better or worse SEO. It’s a usability and possible accessibility enhancement.

This will work:

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-952280727

Specifically: If refChild is null, insert newChild at the end of the list of children. So insertBefore works like appendChild when the second argument is null. Very useful :)

oops, make that: quote.parentNode.insertBefore(cite, quote.nextSibling);

Jules: While yes, he should use the cite tag instead of using the class method, cite is not a block level element, so he’ll have to create the link, insert that into a cite tag and then insert that into a paragraph tag.