0%

<blockquote> Block quotation

A longer quotation from another source, set apart as its own block.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<blockquote> holds a quotation from another source, usually several sentences long. Browsers indent it by default, and it can contain paragraphs, lists and other blocks.

You can put the source URL in the cite attribute. Nobody sees it, though, so name the source in visible text as well, for example in a <figcaption> or a <cite> element. Indenting text that is not a quotation is a CSS job.

According to the blockquote element definition (opens in a new tab), attribution belongs outside the blockquote, in a figcaption for instance. Practise it in the Quotes and Code lesson.

Syntax

<blockquote cite="https://example.com/source">
  <p>Quoted text.</p>
</blockquote>

When to use it

Reach for <blockquote> when you reproduce a passage from somewhere else at length: a paragraph from a court ruling in a news story, a customer testimonial on a product page, a clause from a law in a policy explainer, or an earlier message quoted in a forum reply. The test is simple. A quote that sits inside your own sentence takes the q element, and one that stands on its own as one or more paragraphs takes blockquote.

One case trips up many authors: the pull quote. Magazines often repeat a striking line from the same article in large type. That text is not quoted from another source, so the standard suggests marking it up as an aside element (opens in a new tab) instead. Also wrap the quoted words in <p> elements rather than leaving bare text, so multi-paragraph quotes keep their structure and your CSS for paragraphs applies inside the quote too.

Attributes

AttributeWhat it does
citeURL of the source of the quotation (not displayed).

Live example

Edit the code and watch the preview.

<figure>
  <blockquote cite="https://www.w3.org/standards/">
    <p>The power of the Web is in its universality.</p>
  </blockquote>
  <figcaption>Tim Berners-Lee</figcaption>
</figure>

More examples

Forum reply quoting a message

In a discussion thread, a reply often repeats part of an earlier post before answering it. The quoted post goes in a blockquote, the name of the person comes before it in normal text, and the reply follows as a regular paragraph.

<p><strong>Sam</strong> wrote:</p>
<blockquote>
  <p>Does anyone know if pancakes can be frozen?</p>
</blockquote>
<p>Yes! Stack them with baking paper between each one and freeze them for up to two months.</p>

Multi-paragraph book quote

A blockquote can hold several paragraphs. Here a passage from a classic novel gets a left border with CSS, and the source is credited after the quote with the cite element for the book title.

<blockquote style="border-left:4px solid #ccc;margin-left:0;padding-left:16px">
  <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do.</p>
  <p>Once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it.</p>
</blockquote>
<p>&mdash; Lewis Carroll, <cite>Alice's Adventures in Wonderland</cite></p>

Tip: The cite attribute is hidden, so name the source in visible text.

Browser support

blockquote has been part of HTML since the earliest versions and works in every browser. Browsers give it a default margin of about 40px on the left and right, which you can change with CSS. The cite attribute is valid, but no mainstream browser displays it or turns it into a link.

Accessibility

Some screen readers announce where a blockquote starts and ends. Use it for real quotations only, or users get misleading cues. The W3C note Understanding Info and Relationships (opens in a new tab) explains why markup has to match the content.

Common mistakes

Wrong

<blockquote>Indented paragraph of my own text</blockquote>

Right

<p class="indented">Indented paragraph of my own text</p>

blockquote means quoted content. Indent with CSS margin or padding.

Wrong

<blockquote>
  <p>Stay hungry.</p>
  <p>- Steve Jobs</p>
</blockquote>

Right

<figure>
  <blockquote><p>Stay hungry.</p></blockquote>
  <figcaption>Steve Jobs</figcaption>
</figure>

The attribution is not part of the quote, so it goes outside blockquote.

Frequently asked questions

How do I add the author of a blockquote?

Put it outside the <blockquote>, since everything inside counts as quoted text. The usual pattern is a <figure> holding the blockquote and a <figcaption> with the author, plus <cite> for the title of the work if you like. The cite attribute can carry the source URL as well, but browsers do not display it. Titles of quoted works are covered on the cite element page.

What is the difference between blockquote and q?

Length and position. <blockquote> is for longer quotations that stand as a block of their own, usually one or more paragraphs. <q> is inline, meant for short quotations inside a sentence, and browsers add quotation marks around it automatically. Neither belongs around text that nobody is quoting. The typographic convention behind block quotes is explained in Wikipedia's article on block quotations (opens in a new tab).

Practise it

Related text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<pre>Shows text exactly as typed, spaces and line breaks included.<div>A generic block box with no meaning, for grouping and styling.<span>A generic inline wrapper with no meaning, for styling part of a line of text.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<i>Text in another voice: foreign words, terms, thoughts, ship names. Italic.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<kbd>Keys or text the user should press or type.<samp>Sample output from a program or a computer system.<var>A variable in math or in code. Italic by default.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.