CHAPTER 19 ■ CALLOUTS AND QUOTESInline Quote
Problem You want to create an inline quote.
You cannot use
because it is a block element.
You should not use theelement, even though it was designed for inline quotes, because
most browsers automatically insert English-style double quotes around the contents of.
This is a problem because there are over 23 different types of international quotation marks
and many ways these can be combined to indicate quotes in different languages, dialects,
and writing styles. Because of this complexity, only an author can make the choice of
quotation marks. It is unfortunate that the HTML specification requires browsers to
automatically insert quotes around the contents of. Internet Explorer does not insert
quotes, and other browsers should follow its lead.
Solution You can enclose an inline quote in to identify it as a quote. You can
include a citation following the text of the quote and before the end tag of the . A
citation is typically placed within parentheses and is enclosed in the element. You
can place any inline content in . A citation commonly contains a description of the
source of the quote, which is commonly embedded in a hyperlink to the actual source.
The double quote marks shown in the following pattern can be replaced by any type of
quote marks.
Pattern^
HTML ^
"QUOTE" ( SOURCE )
CSS
.quote { STYLES }
.quote cite { STYLES }
Location This pattern works on any element.
Tips Because it is natural to put line breaks between elements like and , it is easy to
introduce undesirable whitespace between the parentheses and the contents of the citation.
The obvious solution is not to put whitespace between these elements. If that is not an
option, you can put a line break inside a tag instead of between tags. In my example, I put a
line break inside the tags just before the closing greater-than sign.
Example Notice how Firefox added quotation marks around the second example because it was
embedded ininstead of .
Related to Inline Block Quote; Inline Elements (Chapter 2)