Block quotes, quote citations, and definitions

The blockquote element is used to define a lengthy quotation and must be set within a
block-level element. Its cite attribute can be used to define the online location of quoted
material, although the cite element is perhaps more useful for this, enabling you to place
a visible citation (a reference to another document, such as an article) online; this is usually
displayed in italics. See the “Creating drop caps and pull quotes using CSS” section for
more on using this element.

Note that some web design applications—notably, early versions of Dreamweaver—
used the blockquote element to indent blocks of text, and this bad habit is still used
by some designers. Don’t do this—if you want to indent some text, use CSS.

For shorter quotes that are inline, the q element can be used. This is also supposed to add
language-specific quotes before and after the content between the element’s tags. These
quotes vary by browser—Firefox adds “smart” quotes, Safari and Opera add “straight”
quotes, and Internet Explorer doesn’t display anything at all. The article “Long Live the Q
Tag,” by Stacey Cordoni (available at A List Apart; www.alistapart.com/articles/qtag),
offers a few workarounds, although none are ideal (one advises using JavaScript; another
uses CSS to hide the quotes in compliant browsers, and then says to add the quotes manually,
outside of the element’s tags. However, another alternative is to merely ensure that
the quoted content is differentiated from surrounding text, which can be done by setting
font-style in CSS to italic for the q element.
Finally, to indicate the defining instance of a term, you use the dfn element. This is used to
draw attention to the first use of such a term and is also typically displayed in italics.