blockquote

Tweet

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 the below image. 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 (script element is also allowed).

A blockquote between two normal paragraphs (note indentation)

A blockquote between two normal paragraphs (note indentation)

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>

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

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.

No Reader comments