Quoted Text

Contact Us or call 1-877-932-8228
Quoted Text

Quoted Text

The <blockquote> and <q> elements are used to designate quoted text. Both elements can take the cite attribute, which is used to reference the source. <blockquote> is a block-level element, while <q> is an inline element. See the example below:

Code Sample:

Text/Demos/Quotes.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quotes</title>
</head>
<body>
<h1>The Declaration of Independence</h1>
<p>The Declaration of Independence begins with the following paragraph:</p>
<blockquote cite="http://www.ushistory.org/declaration/document/index.html"><p>When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p></blockquote>

<p>The second paragraph, which begins <q cite="http://www.ushistory.org/declaration/document/index.html">We hold these truths to be self-evident, that all men are created equal...</q> is more widely known.</p>
</body>
</html>

Code Explanation

Most browsers indent blockquotes from both the left and right. They are supposed to wrap text nested in <q> tags with quotes. Firefox renders this page as follows:Display of Quote Example Declaration of Independence

Some notes:

  • Modern browsers don't do anything visual with the cite attribute.
  • Blockquotes should not be used simply to indent text from both sides. CSS can be used for that purpose.
  • Blockquotes cannot be contained within paragraphs.
  • Blockquotes cannot have text as a direct child. Usually, blockquotes contain paragraphs (<p> tags).
Next