10. Quotation and Citation

Introduction

HTML provides several elements for marking up quotations and citations: <blockquote>, <q>, and <cite>. These elements help identify quoted content, provide proper attribution, and improve accessibility. Using semantic quotation elements helps browsers and assistive technologies understand quoted content.

Quotation Elements

blockquote

For block-level quotations:

<blockquote cite="https://example.com/source">
    <p>This is a long quotation that spans multiple lines.</p>
</blockquote>

q

For inline quotations:

<p>He said, <q cite="https://example.com">This is a short quote.</q></p>

cite

For citations and references:

<p>From <cite>The Book Title</cite> by Author Name.</p>

Common Patterns

Block Quote with Citation

<blockquote cite="https://example.com/article">
    <p>Quoted content here.</p>
    <footer>
        — <cite>Author Name</cite>,
        <cite><a href="https://example.com/article">Article Title</a></cite>
    </footer>
</blockquote>

Inline Quote

<p>As the author wrote, <q>This is an important point.</q></p>

Best Practices

Use cite Attribute

Include source URLs:

<blockquote cite="https://example.com/source">
    <p>Quoted content</p>
</blockquote>

Proper Attribution

Always attribute quotes:

<blockquote>
    <p>Quote content</p>
    <footer>— Author Name</footer>
</blockquote>