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 standalone quote (generally a longer one, but not necessarily) (red-a.jpg and red-b.jpg) and displays on its own line by default red-c.jpg. Meanwhile, the q element is for short quotes, like those within a sentence red-d.jpg.

red-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.

red-b.jpg 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”).


Click to view larger image

red-c.jpg 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.

red-d.jpg 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 red-e.jpg. Be sure to read the tips to learn about alternatives to using the q element.


Click to view larger image

red-e.jpg 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

  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 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>.
  • + Share This
  • 🔖 Save To Your Account