skip to content rich footer

stevenclark.com.au

subscibe to the StevenClark.com.au rss feed

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?

Articles are licenced under a Creative Commons Licence but copyright of images is retained by © Steven Clark 2007 - 2008

Leave a Reply

NOTE: fields marked with an asterisk * are required.





skip to top of page

Currently Reading

Information and Data Modelling (Second Edition) by David Benyon (Cover)With an eye toward implementing another web interface database solution from the ground up I'm casually revisiting David Benyon's Information and Data Modelling (Second Edition). Its critical to have a solid understanding of conceptual data modelling and knowing how to identify various things like fan traps and three way traps very early in the process. To that end, while its fine to have a basic understanding of third normal form and general ideas about relations (that which relational databases rely on), its also a great idea to spend time exploring the theory and case studies that lead to a higher understanding.

Often people I deal with just snuff their nose and say they can design a database - but often its a very naive approach. Having read this book about four years ago its time for a quick refresher over my holiday period. No, I doubt few will envy me.