Blockquote me Happy
This is a rewrite of an older post of mine, which happened to be pretty shittly written. It had words like "shittly" in it which I'm not sure even exist. Anyhow, there we go.
<blockquote> elements are great elements which sadly are often not used as much as they should. As the name suggests a blockquote is intended for use as a container for quotations. They are great for semantically marking up a chunk of text that is being quoted verbatim. Many developers simply do not utilise this tag because either:
- they are not aware of it's existance, or
- they do not question it's purpose and find workarounds.
The latter of the two is most often the case with designers simply using a stylised <p> tag. A quotation should ideally be marked up like this:
<blockquote> <p> "Oh my god, they killed Kenny!" </p> </blockquote>
Blockquote Misconception
A common misconception with the use of the blockquote element is that it is similar to the <p> tag, and can therefore directly contain text content. This is not the case. A blockquote actually mirrors elements such as the <div> tag. A structurally correct blockquote should contain an element such as a paragraph.
Cite
A <cite> tag represents a citation - the source of the quote. Citations can be placed into the flow of a document as an attribute of the blockquote, as a seperate <cite> tag, or both. The latter citation tag <cite> is an inline element, like a <span>, and therefore must be placed within text using, say, a <p> paragraph element.
<blockquote cite="Stan March"> <p> "Oh my god, they killed Kenny!" </p> <p><cite>Stan Marsh</cite></p> </blockquote>
So now you know how to correctly insert a blockquote into the flow of a document. You will find that by utilising these new tags you will have greater control using your CSS, without the use of additional class or id attrubutes. You will also be improving the quality of your markup and the accessibility of your website.
"Oh my god, they killed Kenny!" - Stan Marsh
02/04/2007 
8 Comment(s)
On 13/07/2006 BilleeD said:
I agree completely with regards to the blockquote tag not being utilized enough. As a web developer who uses several proprietary CMS systems, I have also noticed that none allow the insertion of the blockquote tag from the WYSIWYG editor. This means that while I would love to use a blockquote to markup comments or testimonials for my clients, I cannot rely on it being used. Plus the client typically does not know (X)HTML and allowing them access to a portion of the page marked up with blockquotes is sure to spell trouble. I know that FCKEditor allows for simple customizations (which allows you to add menu items such as blockquote and definition lists), but the majority of our clients use a CMS that includes SOEditor or something similar. Bugger... :(
Thank you for the post. It is heartening to know that there are folks out there using (X)HTML the way that it was supposed to be used; for structure, not visual presentation.
On 13/07/2006 Owen Mc Gauley said:
Hi Steve. Thought I would return the favour and drop you a comment. Love this piece about the blockquote element. I think I fall in to the category of neglecting to use the poor bugger. Well not any more, thanks to you. Consider yourself bookmarked my friend.
On 14/07/2006 P.J. Onori said:
Good topic to bring up. Blockquotes seem to rarely used for such circumstances - I still do not understand why.
Very nice article.
On 14/07/2006 Steve Tucker said:
Glad there are a few of us in the same boat on this subject. For me clean, attractive and most importantly correct markup does nothing but good for a document. I often find the most satisfying of work is that done correctly in every way possible.
@Owen: Dont mention it mate ;)