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>

  Try it Yourself
• 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>

  Try it Yourself
• 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>

  Try it Yourself
• 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

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile