HTML Quotation Elements

HTML provides several elements for marking up quotations in your web pages. These elements help semantically identify quoted content and often provide default styling.

Main Quotation Elements

1. <blockquote> - Block Quotations

Used for longer quotations that should stand as a separate block of content.

<blockquote cite="https://example.com/source">
  <p>This is a longer quotation that stands as a separate block in your document.</p>
</blockquote>

• Typically displayed as indented text
• The cite attribute can specify the source URL (not visible to users by default)

2. <q> - Inline Quotations

Used for shorter quotations within a sentence.

<p>As Shakespeare wrote: <q>To be, or not to be</q> is a famous line.</p>

• Browsers usually add quotation marks around the content
• Also supports the cite attribute

3. <cite> - Citation

Used to mark up the title of a creative work being referenced.

<p>More information can be found in <cite>HTML: The Living Standard</cite>.</p>

• Typically displayed in italics
• Not for marking up the author's name (though often misused this way)

Additional Related Elements

<abbr> - Abbreviations

While not strictly a quotation element, it's often used with quoted content.

<p>The <abbr title="World Wide Web Consortium">W3C</abbr> defines HTML standards.</p>

Attributes

• cite: Used in <blockquote> and <q> to specify the source URL
• title: Often used with <abbr> to provide the full term

Best Practices

1. Use <blockquote> for standalone quotations, <q> for inline ones
2. Always provide proper attribution
3. Use the cite attribute when quoting online sources
4. For visual styling, use CSS rather than relying on default browser styles

These elements help make your content more semantically meaningful and accessible.