Blockquote

<blockquote>: The Block Quotation element #

::: section-content The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <blockquote> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.

—Aldous Huxley, Brave New World
::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} blockquote { margin: 0; }

blockquote p {
  padding: 15px;
  background: #eee;
  border-radius: 5px;
}

blockquote p::before {
  content: '\201C';
}

blockquote p::after {
  content: '\201D';
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element's attributes include the global attributes.

cite

A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote. :::

Usage notes #

::: section-content To change the indentation applied to the quoted text, use the CSS margin-left and/or margin-right properties, or the margin shorthand property.

To include shorter quotes inline rather than in a separate block, use the <q> (Quotation) element. :::

Examples #

::: section-content This example demonstrates the use of the <blockquote> element to quote a passage from RFC 1149{target="_blank"}, A Standard for the Transmission of IP Datagrams on Avian Carriers.

::: code-example [html]{.language-name}

<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside early spring. This
    is because of the 3D ether space available to the carriers, in contrast to
    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

::: :::

Result #

::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Content categoriesFlow content, sectioning root, palpable content.
Permitted contentFlow content.
Tag omissionNone, both the starting and ending tag are mandatory.
Permitted parentsAny element that accepts flow content.
Implicit ARIA roleblockquote
Permitted ARIA rolesAny
DOM interfaceHTMLQuoteElement
:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-blockquote-element]{.small}


:::

Browser compatibility #

::: _table Desktop Mobile


             Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

blockquote 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 cite 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 :::

See also #

::: section-content

  • The <q> element for inline quotations.
  • The <cite> element for source citations. :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote{._attribution-link} :::