Block Quotations

format_quote The <blockquote> Element

The HTML <blockquote> element indicates that the enclosed text is an extended quotation.

Used for longer quotations that require paragraph breaks.

compare <q> vs <blockquote>

Element Usage Display
<q> Short inline quotes Quotation marks
<blockquote> Longer quotes Indented block

code Syntax

<blockquote cite="https://example.com/source">
  <p>Long quotation text here...</p>
</blockquote>

Can be combined with <cite> element to specify the source.

format_list_bulleted Code Examples

<blockquote cite="https://www.goodreads.com/quotes">
  <p>Be the change that you wish to see in the world.</p>
  <footer>- <cite>Mahatma Gandhi</cite></footer>
</blockquote>

lightbulb Best Practices

  • check_circle Use for multi-line quotations
  • check_circle Always include cite attribute for source URL
  • check_circle Use <footer> with <cite> for attribution
  • check_circle Improves accessibility and semantic structure

assignment Exercise: Famous Quotes

Create a web page with block quotations from famous people, including proper attribution.

HTML blockquote element example