Skip to: content, navigation

by Ian Lloyd

blockquote (HTML element)

Spec
Depr. Empty Version
No No HTML 3.2
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Partial Partial Partial Partial
<blockquote cite="uri">
</blockquote>

Example

The example below is a quote from an as yet unidentified source who despairs about the stupidity of stock photography:

<blockquote>
  <p>It's missing alt text, so it's difficult to determine what it's
      supposed to mean. Presumably "oooh, there's been a global
      ecological catastrophe and we’ve got the last four leaves in the
      world and we've patented the DNA". Or they're rubbing ganja
      leaves together to extract the resin, but are too stupid to
      recognise Marijuana so are trying it with willow or silver
      birch.</p>
</blockquote>
Type
block-level element
Contains
one or more block-level elements
Contained by
block-level elements

Description

The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs (which you’d mark up using nested p elements).

The W3C recommendation states that web page authors should not type quotation marks in the text when they’re using blockquote—we can leave it to the style sheets to take care of this element of presentation (just as it should be when the q element is used for short, inline quotations). In practice, though, many authors do choose to include quote marks, as browser support for automatically inserting the language-appropriate quotation marks is extremely poor.

By default, most browsers’ basic built-in style sheets render blockquote content with left and right indentations, as shown in Figure 1. 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; to visually indent a block of text that’s not a quotation, use CSS (margin-left, or any other style property you care to choose).

Note that XHTML allows the blockquote element to contain only other block-level elements; in HTML4, the script element is also allowed.

Figure 1. A blockquote between two normal paragraphs (note indentation) Screenshot of blockquote

Use This For …

This element is used to mark up one or more paragraphs, which may themselves contain other inline elements (for example strong, em or a elements).

Compatibility

IE5.5Partial
6.0Partial
7.0Partial
Firefox1.0Partial
1.5Partial
2.0Partial
Safari1.3Partial
2.0Partial
3.0Partial
Opera9.2Partial
9.5Partial

blockquote has been around a long time, but it hasn’t aged a day. If you use it in a situation where style sheets aren’t applied, and you’re relying only on the browser’s default (or built-in) set of styles, the blockquote renders almost identically across all browsers, just as it did in some of the earliest browsers, none of which rendered the cite attribute’s value on the page.

The support chart shows as "partial" rather than "full" because the browsers lack support for indicating the source of the quote through the cite attribute.

Related Reading

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters