- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
This chapter is from the book
Quoting Text
There are two special elements for marking text quoted from a source. The blockquote element represents a standalone quote (generally a longer one, but not necessarily) (
and 
) and displays on its own line by default 
. Meanwhile, the q element is for short quotes, like those within a sentence 
.
A blockquote can be as short or as long as you need. Optionally, include the cite attribute—not to be confused with the cite element shown in the first paragraph—to provide the location of the quoted text.
If you’d like to provide attribution, it must be outside the blockquote. You could place the attribution in a p, but the most explicit way to associate a quote with its source is with a figure and figcaption, as shown (see “Creating a Figure”).
)
Browsers typically indent blockquote text by default, and don’t display the cite attribute value. (See the second tip for a related recommendation.) The cite element, on the other hand, is supported by all browsers and typically renders in italics, as shown. All of these defaults can be overridden with CSS.
Here we see two q examples. Add the lang attribute to the q element if the quoted text is in a different language than the page’s default (as specified by the lang attribute on the html element).
Browsers are supposed to enclose q element text in language-specific quotation marks automatically, but the results are mixed 
. Be sure to read the tips to learn about alternatives to using the q element.
)
Browsers are supposed to add language-specific quotation marks around q elements automatically. In this example, that means curly double quotes for English and guillemets for French. IE (shown on top) and Chrome do this correctly. Firefox (shown on bottom) is correct for English but not French. Opera and Safari do neither, rendering straight quotes instead, including for French. Inconsistencies like these limit the usefulness of the q element.
To quote a block of text
- Type <blockquote to begin a block quote.
- If desired, type cite="url", where url is the address of the source of the quote.
- Type > to complete the start tag.
- Type the text you wish to quote, surrounding it with paragraphs and other elements as appropriate.
- Type </blockquote>.
To quote a short phrase
- Type <q to begin quoting a word or phrase.
- If desired, type cite="url", where url is the address of the source of the quote.
- If the quote’s language is different than the page’s default language (as specified by the lang attribute on the html element), type lang="xx", where xx is the code for the language the quote will be in. This code is supposed to determine the type of quote marks that will be used (“” for English, «» for many European languages, and so on), though browser support for this rendering can vary.
- Type > to complete the start tag.
- Type the text that should be quoted.
- Type </q>.
TIP
You can use the optional cite attribute on blockquote and q to provide a URL to the source you are quoting. Although historically browsers haven’t displayed the cite attribute’s URL 
, in theory it can be handy for search engines or other automated tools that gather quotes and their references. If you would like visitors to have access to it, you could repeat the URL in a link (via the a element) in your content. Less effectively, you could expose cite’s value via JavaScript (search online for sample code).
TIP
You can nest blockquote and q elements. For example, <p>The short story began, <q>When she was a child, she would say, <q>Howdy, stranger!</q> to everyone she passed.</q></p>. Nested q elements should display the appropriate quotation marks automatically—for example, in English the outer quotes should be double and the inner ones should be single. Since outer and inner quotations are treated differently in languages, add the lang attribute to q as needed 
. Unfortunately, browsers are inconsistent with nested q elements much like they are for non-nested ones 
.
TIP
Because of cross-browser issues with q , many (most likely the majority of) coders choose to simply type the desired quotation marks or use character entities instead of the q element.