Correct Use of Blockquote and Q
One of the most maligned elements in the (X)HTML arsenal is the blockquote. Used properly it enables us to mark up longer quotations. Used for bad, its infamy is as a grimy slug sucking way to indent parts of a layout. My sin has been more along the lines of laziness via software authoring. Let me explain.
I have to admit that in the last year or so I’ve only really used blockquote via WordPress. Most project work I do is now handled by content management software of some sort and I’ve been predominantly using WordPress – which happens to insert the <p> tags into the blockquote automagically. So, what I’m used to writing in blog posts is: – WRONG.
<blockquote cite="the_url_of_origin">This is something I happen to be quoting<cite>Person Quoted</cite></blockquote>
This is actually invalid XHTML 1.0 Strict. What WordPress rightly does, it inserts <p> (paragraph) block level elements around the content of my quotation within the blockquote tags. CORRECT.
<blockquote cite="the_url_of_origin"><p>This is something I happen to be quoting<cite>Person Quoted</cite></p></blockquote>
Roger Johansson’s Use Only Block-Level Elements in Blockquotes explains that only block level elements can be direct descendents of a blockquote. Which explains why it would be just as invalid to have the <cite> element outside the <p> element. This would be as follows – WRONG.
<blockquote cite="the_url_of_origin"><p>This is something I happen to be quoting</p><cite>Person Quoted</cite></blockquote>
Also, you will note in these examples you can use the cite attribute within the blockquote to identify the source of the quoted material. Admittedly this isn’t that useful (as far as I’m aware) except to assist anyone looking at the code. You could provide an unobtrusive script which takes cite attributes and places them in your markup, its always an option.
And, don’t forget the humble <q> element for inline quotes that aren’t very long. It’s often overlooked. An example follows:
<p>As <cite>Bill Jones</cite> said on the radio <q>That was one for the Gipper</q> before he fell over stone cold dead!</p>
I hope this improves your understanding of these elements. If I’ve been wrong in the past on my use of blockquote syntax it’s simply a by-product of content management software picking up after me. Are you getting to be a lazy coder, too?
