🚀 Your All-in-One Toolbox — 90+ Free Online Tools
Logo

HTML blockquote Tag

Learn to use the HTML <blockquote> tag to semantically indicate extended quotations from another source, including the cite attribute for attribution.

Introduction to the HTML blockquote Tag

The HTML <blockquote> tag is used to indicate that the enclosed text is an extended quotation, typically from another source. Browsers usually render blockquote content as indented text, though this can be (and often is) styled differently with CSS.

Basic Syntax

html
<blockquote cite="http://www.example.com/source.html">
  <p>This is a quotation taken from another source. It might span multiple paragraphs.</p>
  <p>The source of this quotation can be indicated using the cite attribute.</p>
</blockquote>
- The content within the <blockquote> tags is the quoted material. - The cite attribute (optional) can be used to provide a URL pointing to the source of the quotation. This URL is not displayed by browsers but can be used by search engines or scripts.

Key Characteristics

- Block-Level Element: It typically starts on a new line and creates a block of content. - Semantic Meaning: It clearly marks the content as a quotation from an external source. - Styling: Browsers often indent <blockquote> elements, but relying on this default styling is not recommended. Use CSS for consistent and custom styling.

Attribution

While the cite attribute points to the source URL, visible attribution is often provided using other elements like <p>, <cite>, or <footer> either inside or immediately after the <blockquote>. Example with visible attribution:
html
<figure>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</p>
  </blockquote>
  <figcaption>— Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>
Here, <figure> and <figcaption> are used to associate the quotation with its caption (the attribution).

<blockquote> vs. <q>

- <blockquote>: For longer, block-level quotations that might span multiple paragraphs. - <q> (Inline Quote): For short, inline quotations that do not require a paragraph break. Browsers typically render <q> elements with quotation marks. `html

John said, Hello, world! and then left.

`

When to Use <blockquote>

- When quoting a substantial block of text from another document, book, speech, or any other source. - When the quoted material is set off as a distinct block from the surrounding text.

Styling with CSS

It's common to style blockquotes for better visual appeal and to distinguish them clearly.
css
blockquote {
  background-color: #f9f9f9;
  border-left: 5px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  font-style: italic;
}

blockquote p {
  margin-bottom: 0.5em;
}

blockquote footer, blockquote figcaption {
  text-align: right;
  font-style: normal;
  font-size: 0.9em;
  color: #555;
}

Conclusion

The <blockquote> tag is the semantically correct way to mark up extended quotations in HTML. Using it with the optional cite attribute and clear visible attribution (often with <figcaption> or <cite>) helps create well-structured, meaningful, and accessible content.
Back