HTML blockquote: Block Quotations and Source Attribution

HTML <blockquote> marks a self-contained section quoted from another source. It can contain multiple paragraphs. You can record the original URL in its cite attribute and add a separate, visible link so readers can check the source.

When should you use blockquote?

Use blockquote when presenting quoted material as a separate section. Do not use it merely to indent a paragraph or change its color. For a short quotation within a sentence, use <q>; see the HTML q reference.

A block quotation can contain paragraphs and other flow content. Keep the quotation distinct from its attribution: place the author or source credit outside <blockquote>. Check the original wording and use only the material needed for your purpose.

A complete example with a source link

Save the following code as quote.html and open it in a browser. No server or additional library is required. The short English quotation comes directly from the HTML Standard.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Block quotation example</title>
</head>
<body>
  <p>The HTML Standard describes what blockquote represents as follows.</p>
  <blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <p lang="en">a section that is quoted from another source</p>
  </blockquote>
  <p>Source: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>

The browser displays the introductory paragraph, the quotation, and the source link in that order. Default styling varies, but browsers commonly give the quotation extra margins. The link opens the relevant section of the HTML Standard. The quotation retains its original English wording.

The cite attribute is different from a visible citation

The cite attribute contains the URL of the quoted source. Adding it does not automatically display a link or source credit. Include a separate <a> element and descriptive text when readers need to follow the reference.

The cite attribute and the <cite> element share a name but have different roles. The attribute records a source address; the element marks the title of a work, such as a book or document. An author's name alone is not a work title.

Style the quotation with CSS

Keep the quotation's meaning in HTML and adjust its margins and border with CSS. Link a stylesheet from the example's head, then add the following rule to that stylesheet. You can also add the rule to an existing stylesheet used by the page.

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid #477080;
}

The quotation gains a left border and internal spacing. If you add background or text colors, maintain readable contrast. Do not mark ordinary, unquoted content as blockquote merely to obtain this appearance. See the HTML Standard's blockquote definition and the MDN blockquote reference for its syntax and usage conditions.