Quotes

Quotes can help differentiate opinion from facts. Good quotes help tell a story and enhance the credibility of the text. Structuring a quote using HTML is essential to add meaning to the text and allow users to follow citations to confirm source materials.

There are three types of quotes that you typically see on a webpage:

• Inline Quote

• Blockquote

• Pull Quote

Inline Quote

The HTML <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the <blockquote> element.

<q> Attributes

citeThe value of this attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

Markup Example

<p>According to Mozilla's website,
  <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q></p>

(Source: Mozilla Developer Network (MDN) web docs.

Blockquote

Pull Quote

See production notes on quotes for markup examples.