Skip Navigation
Web Services
Member, Texas Tech University System The Princeton Review - 373 Best Colleges, 2011 Edition

Blockquotes

By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations... As a consequence, many people learned to use blockquote to indent the text as a way to draw attention to a paragraph or section of a page. Of course, this is bad practice—it’s simply the wrong markup for the job. Only use blockquote if you’re actually quoting a source...

Sitepoint

The <blockquote> element is used to mark up text quoted from another source. Most browsers will indent a blockquote by default, so the element has been widely misused for the sole purpose of indentation. This is neither semantically correct nor good coding practice, as the default indentation could be changed with CSS. In fact, the main ASU style sheet does remove the indentation from blockquotes.

Blockquotes can contain one or more paragraphs of text and should also contain a <cite> element. The <cite> should contain a link to the source of the quotation if that source is available online.

As mentioned above, on the ASU website blockquotes will appear identical to normal paragraphs with no indentation or other special styling. In order to make the best use of the <blockquote> element for its intended purpose, class="styled" should be added to the opening tag as in the example below. This, along with a proper <cite> will set the quote apart by styling it with a dotted border and automatic decorative quote marks. This can be seen in use on most of these code pages for the quotation in the upper right.

<blockquote class="styled">
        <p>By default, most browsers&rsquo; basic built-in style sheets render blockquote content with left and right indentations..<a href="http://reference.sitepoint.com/html/blockquote#blockquote__fig-blockquote" title="used to indicate a block of quoted text, with an   attribution that identifies who said or wrote it"></a>. As a consequence, many people learned to use blockquote to indent the text as a way to draw attention to a paragraph or section of a page. Of course, this is bad practice&mdash;it&rsquo;s simply the wrong markup for the job. Only use blockquote if you&rsquo;re actually quoting a source...</p>
        <cite><a href="http://reference.sitepoint.com/html/blockquote" target="_blank" class="external">Sitepoint</a></cite>
</blockquote>

By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations... As a consequence, many people learned to use blockquote to indent the text as a way to draw attention to a paragraph or section of a page. Of course, this is bad practice—it’s simply the wrong markup for the job. Only use blockquote if you’re actually quoting a source...

Sitepoint

Appropriate Use

Dreamweaver's Indet text ButtonDreamweaver unfortunately makes it very easy to use <blockquote> for its unintended purpose by providing a misleading button labeled “text indent”. This button, when used in a list (<ol>, <ul>) does what should be expected and indents the selected list item to the next nested list level. However, when this button is clicked with other types of elements selected, it simply nests the selected element within a <blockquote>. Again, this is incorrect behavior, and as such, this button should not be used except for with lists. Because there is often a valid need to indent a block of text that is not a quotation, we have added two styles to the ASU CSS for this purpose. Adding class="indent1em" or class="indent2em" to an element will indent it 1em or 2ems respectively (in CSS, an “em” is a unit of measurement equal to the current font size - w3schools.com).

<p class="indent2em">This is a paragraph of text that I want to be indented.</p>

This is a paragraph of text that I want to be indented.

<blockquote>This is a paragraph of text that I want to be indented.</blockquote>
This is a paragraph of text that I want to be indented.