Marking up quotations

Sometimes, in articles or elsewhere on our pages, we wish to add a quotation from an article, person, song or some such thing. So how should it be marked up? Well, I would suggest rendering quotations using a well-intended and semantically meaningful HTML structure.

First attempt

1. <div class="quotation">
2. <p class="quote">
3. Do I listen to pop music because I'm miserable or am I miserable because I listen to pop music?
4. </p>
5. <p class="source">
6. John Cusack, High Fidelity
7. </p>
8. </div>
9. Download this code: /code/quotations_01.html

This could get the job done, and since there are hooks for everything, we could style it however we desire. However, this implementation creates the following problems:

• The div is a generic container, meaning that browsers or users without CSS will not get any indication that this is any different from the content surrounding it. It will simply look like everything else, other than causing a line break.
• It’s heavier in markup than it needs to be, given the reliance of class names.

A better approach

1. <blockquote>
2. <p>
3. Do I listen to pop music because I'm miserable or am I miserable because I listen to pop music?
4. </p>
5. <cite>
6. John Cusack, High Fidelity
7. </cite>
8. </blockquote>
9. Download this code: /code/quotations_02.html

The W3C recommends the use of the blockquote tag for long quotations, since it was designed to handle this specific situation. Additionally:

• Since we’ve switched to appropriate and semantic markup, all users will be able to differentiate this from the surrounding text, since most browsers will add white space to both the left and right sides of the contents of the blockquote tag. It should be noted that in the past, many have avoided the blockquote tag altogether because of this indentation. With CSS, we can change the default behavior to whatever we’d like it to be.
• We have specifically chosen to use the cite tag to cite the source of the quotation, increasing the semantic meaning of the markup.
• Because we’ve removed the unnecessary class attributes, the HTML is lighter.
• Going forward, many suggest making use of the cite attribute available on the blockquote tag, using it to store a URL to the source of the quotation. However, I know of no user agent that does anything with this, so for the time being, it’s probably not worth doing.

An alternative for shorter quotations

1. According to <cite>Bill Gates</cite> (from 1981),
2. <q lang="en-us">
3. 640K ought to be enough for anybody.
4. </q>
5. Download this code: /code/quotations_03.html

Benefits:

• Most browsers will insert the quotation marks around the text residing in the q tag. Note that IE does not appear to do this, however.
• The W3C recommends using the lang attribute on the q tag since different languages may use different characters as the quotation marks.
• It’s certainly a better approach than relying on the " entity reference, which would otherwise be necessary since the quotation mark is a reserved character in XML, and therefore also reserved in XHTML.

Note: something that many of you may not know: you can nest a quote inside of another quote using the q tag, and most browsers will do the right thing (in English, for example, this means using double quotes for the outer quote and single quotes for the inner quote.

Next post (newer)

Marking up tables

Previous post (older)

Marking up forms