HTML <blockquote> Tag

The <blockquote> tag in HTML is used to define a section that is quoted from another source. It is typically displayed with indentation to visually distinguish it from the surrounding text. This tag helps to semantically mark up longer quotations, improving accessibility and SEO. It's not intended for shorter inline quotations; use the <q> tag for those.

Syntax

<blockquote cite="URL">
  Quoted text here.
  <footer cite="URL_IF_DIFFERENT"> <cite>Author</cite> </footer>
</blockquote>

Attributes

Example

<blockquote cite="https://www.example.com/original-article">
  <p>The quick brown fox jumps over the lazy dog.</p>
</blockquote>

More Examples

Basic Usage with a paragraph

This example shows a simple use of the <blockquote> tag with a paragraph inside for the quoted content.

<p>Here is a quote from a famous saying:</p>
<blockquote cite="https://en.wikipedia.org/wiki/The_quick_brown_fox">
  <p>The quick brown fox jumps over the lazy dog.</p>
</blockquote>

Including a Citation

The cite attribute is crucial for attributing the quotation. This helps ensure proper citation and can be useful for both SEO and the reader's understanding.

<p>According to Wikipedia:</p>
<blockquote cite="https://en.wikipedia.org/wiki/Lorem_ipsum">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <footer>
    <cite>Wikipedia</cite>
  </footer>
</blockquote>

Blockquote with a Nested List

Blockquotes can contain any flow content, such as lists. Here's an example with an unordered list inside the blockquote tag:

<blockquote cite="https://www.example.com/my-notes">
  <p>Here are some key points:</p>
  <ul>
      <li>Point one</li>
      <li>Point two</li>
      <li>Point three</li>
  </ul>
</blockquote>

Using cite inside the footer

Often you'll want to provide a specific author in the footer tag; if the source in cite is not enough, you may provide a specific cite inside the footer tag as well.

<blockquote cite="https://www.example.com/source-article">
    <p>
    "The purpose of our lives is to be happy."
    </p>
    <footer cite="https://en.wikipedia.org/wiki/Dalai_Lama">
        <cite>Dalai Lama</cite>
    </footer>
</blockquote>

Browser Support

Notes and Tips

• Use the <blockquote> tag for longer quotations. For shorter, inline quotations, consider using the <q> tag.
• The cite attribute should contain the URL of the source of the quotation, aiding in proper attribution.
• While browsers generally display <blockquote> elements with indentation, you can customize their appearance using CSS.
• Inside the blockquote, you can use other tags like <p>, <ul>, <ol>, and even <div>, to struct your quote text.
• The <cite> tag within <footer> inside <blockquote> provides further source citation and adds semantic clarity.
• Always attribute the quote to respect the original authors and for copyright purposes.
• Screen readers and search engines use the <blockquote> tag to understand content better for accessibility and SEO.