In an old classic, Dorothy exclaims, “quote and cite and blockquote! Oh, my!” “Wizard of Oz(actually, it was ‘Lions and tigers and bears’ but you may not know that if I didn’t cite it)](http://www.imdb.com/title/tt0032138/quotes/ How are we to reference this quotation from this famous movie? Every which way we like, that’s how. Actually, I’ve been doing it a number of ways lately, trying to find the best solution for the type of writing I do, and you’ll probably want to do the same. However, there are some ways which are more helpful in certain situations, which I’d like to talk about for a minute.

First and always, cite

No matter which way you choose to cite a reference you MUST cite somehow. It really doesn’t matter which tag you use, or if you even use a tag at all, but legally and morally you must tell readers who said what, in any case where you took words — or an idea even — from someone else. Even when paraphrasing you need to tell people that you didn’t come up with that phrase and link to or name the person or place where you heard it.

Go forth and cite

There are a few tags you can use, each for different purposes.

Quoting in blocks

The most common is the <blockquote> tag, which by the way is NOT for indentation. If you’re a client and I catch you using a blockquote tag to move things to the right, I’ll strip it. Blockquotes are full quotations, typically more than one sentence, up to a couple of paragraphs (you shouldn’t use larger context without an author’s permission). These quotes will stand out from the flow of your article, which makes them “block” quotes. Typically, your blockquote should look like this:

“quotation text here”

Inline Quotations

Anytime you have a quotation within a block of text (like the first quotation I used above), you’ll use an inline quote tag, which is typically <q>, although some are starting to use . The only real difference I've seen is that the `<q>` tag (in cool browsers) inserts quotation marks for you, which for me is lame only because it takes control of content away from me as the writer. Quotation marks are punctuation just like a period or exclamation mark, so I prefer to keep that control myself, which makes me use the tag instead. I could be way off base on that, but it works for me. You can “read the specs](http://www.w3.org/TR/xhtml2/mod-text.html and make up your own mind.

Citations

A citation is confusing because we all want to call the actual quotation a citation, but technically, the citation is the reference you’re citing. So, your quote is the words you’re pulling from an article or publication and that article is the citation itself. In this instance, there are a few different ways to cite, but the most basic would be to use bracketed and tags to wrap your cited reference. From there you could place them inside a blockquote or quote after the cited text like so:

"All roads to hell are paved with bad markup." 
me

Putting them all together

Once you’ve figured out the best way to use each tag, you can put them together in a number of ways depending on what type of reference you have. Here are a few common ways that people (including me) have done this:

“You’ve got the brain of a four-year-old boy, and 
I’ll bet he was glad to get rid of it.”


Groucho Marx

Which outputs this (with CSS):

“You’ve got the brain of a four-year-old boy, and I’ll bet he was glad to get rid of it.” Groucho Marx

Or you could output something as simple as this…

Dan Cederholm, in his book, Bulletproof Web Design, shows that rounded corners don’t have to be all that complicated if you’re willing to give it a little extra thought.

…with the following code:

Dan Cederholm, in his book, 

Bulletproof Web Design, 
shows that rounded corners don’t have to be all that complicated 
if you’re willing to give it a little extra thought.

Of course, you’d probably want to link directly to the book instead of just putting it within the cite tag so that someone could click on it, but you get the idea.

One more thing: pull-quotes

“Sometimes I say something so cool it needs to be pulled out.”

One more I’ve been using is to classify a blockquote into a pull-quote. A pull-quote is a quotation that is pulled entirely from the stream of content and is placed (usually floating) around the flow of your text, a lot like the one you see here. In this case, I would make a pull-quote using a blockquote with a class of pqr, pql, or pqc for right, left, and center, depending on how I want the quote to be placed:

“Sometimes I say something so cool it needs to be pulled out.”

You could just use one simple pq class and style it one way. Either way, I use <blockquote> because a pull-quote is usually not part of the natural flow while you’re reading, so when styles are turned off it needs to break apart from the text like a normal blockquote. You could use “ if your pull-quotes generally**do_* flow within the text. If you turn off styles you’ll see the quote is blocked, which makes more sense than if it were a quote or div, span, or other, which I’ve used in the past but aren’t the best.

The bottom line

a citation (the reference itself), `<q>` or a quotation (the actual quoted text), and <blockquote> a blocked quotation (a large block of quoted text).

Honestly, I don’t care much which method you use so long as you’re consistently citing references. It’s more a matter of giving credit where it’s due than being semantically accurate in doing so, though that is important.

---

View more links on this topic