HTML / HTML Tags

HTML <Blockquote> Tag

Oct 12, 2022
3 min read
HTML blockquote Tag

Definition

The <blockquote> Tag indicates that the enclosed text is a quote. It may contain a cite attribute with an URL to the quote source and a cite element with a text description of the source.

Example

<figure>
    <blockquote cite="https://www.imdb.com/title/tt0075148/">
        <p>Life's not about how hard of a hit you can give... 
        it's about how many you can take, 
        and still keep moving forward.</p>
    </blockquote>
    <figcaption>- Sylvester Stallone, <cite>Rocky Balboa</cite></figcaption>
</figure>

Usage

  • You can add a cite attribute to indicate the source URL. These are primarily intended for server-side scripts collecting statistics, not for general readers.
  • You can add a quotation marks to delineate between quoted text and any annotations.
    <figure>
    <blockquote cite="https://www.imdb.com/title/tt0075148/">
        <p>"Life's not about how hard of a hit you can give... "</p>
        <p>And this is where it gets good, he continues:</p>
        <p>"it's about how many you can take, and still keep moving forward."</p>
    </blockquote>
    <figcaption>- Sylvester Stallone, <cite>Rocky Balboa</cite></figcaption>
    </figure>
  • You can use a <footer> element to contain the citation to more clearly relate the quote to the attribution.
    <figure>
    <blockquote cite="https://www.imdb.com/title/tt0075148/">
        <p>Life's not about how hard of a hit you can give... 
        it's about how many you can take, 
        and still keep moving forward.</p>
        <footer>- Sylvester Stallone, <cite>Rocky Balboa</cite></footer>
    </blockquote>
    </figure>
  • A simpler way is to just add the <cite> element to the last line of quoted text. You can even add a link within the citation.
    <figure>
    <blockquote cite="https://www.imdb.com/title/tt0075148/">
        <p>Life's not about how hard of a hit you can give... 
        it's about how many you can take, 
        and still keep moving forward.</p>
        - <cite><a href="https://www.imdb.com/title/tt0075148/">Rocky Balboa</a></cite>
    </blockquote>
    </figure>
  • The <blockquote> content may be abbreviated, have context added, or even contain annotations. Any such changes should be indicated at the text level using either notational conventions or explicit comments.
  • The <blockquote> element should not be used for marking conversations.
  • You do not need to use <p> tags within the <blockquote> element for short snippets.

Attributes

The <blockquote> element supports the Global Attributes, as well as the following:

  • cite

    The cite attribute specifies the source URL for the quoted information. These are primarily intended for server-side scripts collecting statistics, not for general readers.

Best Practices

  • Use <blockquote> for long block-level quotations.
  • Use <q> for smaller inline quotations.
  • Browsers, by default, add a 40px left and right margin to the <blockquote> element. You may wish to style it using CSS.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes