Foundation HTML5 with CSS3

Constructing Content

Web browsers usually display the contents of a cite element in an italicized font, as shown in Figure 4-18,

but—wait for it—you can change that with CSS. In the case of names that should not be italicized, you

could use a class attribute to distinguish cited names from cited titles: <cite class="name">, for

example.

Figure 4-18. Browsers italicize the cite element by default

Required Attributes

No attributes are required for the cite element.

Optional Attributes

There are no optional attributes for the cite element.

q

The q element marks up short, inline quotations (as opposed to blockquote, which you should use for

longer quotations of more than a sentence or two). Like the blockquote element, a q element may carry a

cite attribute to include the URL of the quotation’s source, as you see in Listing 4-31.

Listing 4-31. The q element with a URL in a cite attribute

<p><cite>Norm Deplume</cite>, gadget reporter for <cite>Cape and Cowl

Quarterly</cite>, was impressed by our wide selection, saying that

our warehouse is <q cite="http://example.com/gadgets/PowerOutfitters/">

positively packed to the portholes with paraphernalia.</q></p>

A web browser should automatically render the opening and closing quotation marks at the beginning and

ending of a q element, so don’t add your own quotation marks with the quoted text. Furthermore, only use

the q element for actual quotations from a source, not simply to generate punctuation. Don’t use a q

element to denote example terms or sarcasm; use regular quotation marks for so-called “mock quotes.”

Some older browsers (most notably Internet Explorer) didn’t generate any punctuation

around q elements, so for years many web authors avoided the element entirely. But all

current versions of major web browsers—including IE since version 8—display

automatic quotation marks for the q element.