Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
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 quote (generally a longer one, but not necessarily) that stands alone red_circle-a.jpg and renders on its own line by default red_circle-b.jpg. Meanwhile, the q element is for short quotes, like those within a sentence red_circle-c.jpg (on the next page).

red_circle-a.jpg 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. However, browsers don’t display the cite attribute’s information gray_circle-b.jpg. (See the second tip for a related recommendation.)



<p>He enjoyed this selection from <cite>The Adventures of Huckleberry Finn</cite> by Mark Twain:</p>

<blockquote cite="http://www.marktwain">

    <p>We said there warn't no home like 
    a raft, after all. Other places do seem so cramped up and smothery, but a 
    raft don't. You feel mighty free and easy and comfortable on a raft.</p>


<p>It reminded him of his own youth exploring the county by river.</p>


red_circle-b.jpg Browsers typically indent blockquote text by default. Historically, browsers haven’t displayed the cite attribute’s 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.

red_circle-c.jpg 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).



<p>And then she said, <q>Have you read Barbara 
Kingsolver's <cite>High Tide in Tucson</cite>? It's inspiring.</q></p>

<p>She tried again, this time in French: 
<q lang="fr">Avez-vous lu le livre <cite>High Tide in Tucson</cite> de Kingsolver? C'est inspirational.</q></p>


Browsers are supposed to enclose q element text in language-specific quotation marks automatically, but Internet Explorer didn’t support this until IE8. Some browsers have issues with nested quotes, too. Be sure to read the tips to learn about alternatives to using the q element.

To quote a block of text

  1. Type <blockquote to begin a block quote.
  2. If desired, type cite="url", where url is the address of the source of the quote.
  3. Type > to complete the start tag.
  4. Type the text you wish to quote, surrounding it with paragraphs and other elements as appropriate.
  5. Type </blockquote>.

To quote a short phrase

  1. Type <q to begin quoting a word or phrase.
  2. If desired, type cite="url", where url is the address of the source of the quote.
  3. 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 two-letter 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.
  4. Type > to complete the start tag.
  5. Type the text that should be quoted.
  6. Type </q>.

red_circle-d.jpg Browsers are supposed to add curly double quotes around q elements (and curly single quotes around nested q elements) automatically. As shown here, Firefox does, but not all browsers do (for example, older versions of Internet Explorer).

  • + Share This
  • 🔖 Save To Your Account