Various uses of the <blockquote> element, including epigrams, dialogue, and examples.
There are three acceptable uses for the <blockquote> element. Do not use blockquotes for other purposes!
A block quotations is quoted material that is at least three lines long. Simply wrap this material in <blockquote></blockquote>. Blockquotes, unless given a specially defined class, will typically be marked with stylized quotation marks to draw attention to the fact that they are quoted material.
An epigram is a quotation displayed directly beneath a header element (h1h2, h3) as a kind of subheading for the section that follows. (In print publication, epigrams are typically displayed at the beginning of a chapter.) Epigrams require somewhat different display from ordinary blockquotes, so please mark them up as follows:
<blockquote class="epigram">
It's a fool that looks for logic in the chambers of the human heart. —<cite>Ulysses Everitt McGill</cite>
</blockquote>
The above example would display as follows:
It’s a fool that looks for logic in the chambers of the human heart. —Ulysses Everitt McGill
A citation may be included inside the blockquote, in a <cite> tag, or may be placed in a footnote. Attribution may also be placed in its own paragraph with class “attribution”; e.g.
<p class="attribution"> -- Genghis Khan</p>
Attribution paragraphs will typically display right-justified.
Strictly speaking, an example is not a block quotation. However, legacy content support permits the use of <blockquote class="example"> to enclose material that is to be displayed as an example. Content so marked will display indented, with a (typically yellow or blue) line to its left, rather than with stylized quotation marks.
An alternative, and preferred, markup would be <div class="example">. HTML 5 proposes reserving the class name “example” for just this purpose, which would make it semantically meaningful.
To mark up dialog, use a definition list with class "dialog." Use square brackets to enclose nonspoken sounds attributable to one of the speakers or unavoidable editorial notations.
<dl class="dialog">
<dt>David</dt>
<dd>You really should have used a definition list to mark up this transcript.</dd>
<dt>Kim</dt>
<dd>Why didn't you tell me that before?</dd>
<dt>David</dt>
<dd>I didn't know you were doing it.</dd>
<dt>Kim</dt>
<dd>How many other secret styles do you have?</dd>
<dt>David</dt>
<dd>[laughs evilly]</dd>
</dl>
The above example would display as follows:
- David
- You really should have used a definition list to mark up this transcript.
- Kim
- Why didn’t you tell me that before?
- David
- I didn’t know you were doing it.
- Kim
- How many other secret styles do you have?
- David
- [laughs evilly]
If the transcription requires explanation of sounds not attributable to one of the speakers, close the <dl>, type a description of a sound inside a paragraph with class note, then begin a new <dl>.
<dl class="dialog">
<dt>Sam</dt>
<dd>I wish the train would get here.</dd>
</dl>
<p class="note">A train whistle is heard.</p>
<dl class="dialog">
<dt>Sam</dt>
<dd>Dang it! Where are my bags?</dd>
</dl>
The above example would display as follows:
- Sam
- I wish the train would get here.
A train whistle is heard.
- Sam
- Dang it! Where are my bags?
Whether using <dl> for dialog qualifies as semantic markup is a matter of some debate, but I believe that in HTML/XHTML 4 it is the most appropriate markup available. A new element <dialog> has been proposed for HTML 5 which would replace the <dl> but have identical structure. If this is ever implemented, we can simply replace, via script, all of our <dl class="dialog"> with <dialog>.