Blockquotes, by definition, can and should in most cases have a title attribute and, if possible, a cite attribute. The former is the actually name of the quote’s source. The latter is the URI to the quotes location, if it was retrieved online.

This is all well and good for search engines, but it doesn’t do much for human readers (who are arguably more important, though it depends on who you ask). A human might want to see something like this:

But nobody wants to hard-code a citation into every blockquote, especially when it’s technically correct to attach the information to the semantic element in question (the blockquote, for those of you not following along). So, how to be structurally correct when using blockquotes, while still allowing human readers the benefit of such data?

Well, there are a number of methods. If you’re using a CMS or any kind of dynamically-generated page, you can use the system itself to parse blockquotes for their attributes and reuse that information.

The Old Way

A somewhat simpler and more flexible solution would be Javascript, which isn’t foolproof, but should be good enough for most people. Previously, I used Dunstan’s Blockquotes, which was an excellent solution for a long time.

The New Way

I ran into conflict issues, however. Also, the script seems overly complicated for what it’s doing. I long ago chose my spot in the jQuery camp, and am currently using it on this blog for Thickbox and a few other miscellaneous things. So I thought: why not get blockquote data using jQuery? Here’s my resulting code (which I’m sure is flawed and crufty, but I put it together in about five minutes; suggestions are welcome).

And there you go. An excellent Javascript library, a few lines of code (more than necessary even, as I wanted to cover all the possible cases), and you’ve got a flexible solution to blockquote citations.

1 Comment to “Using jQuery to extract blockquote metadata”

This is a really great post, thanks for sharing. I only have sporadic connection to the internet at the moment, but I’ve downloaded this page for testing with my site, and I’ll implement it live later.

I would appreciate seeing a lot more posts about the blog itself! This is a really mean site you have going.