11. blockquote Element

Introduction

The <blockquote> element represents a section that is quoted from another source. It’s used for longer quotations that should be displayed as a separate block. The blockquote element helps identify quoted content and can include citations.

Basic Usage

<blockquote>
    <p>This is a quoted passage from another source.</p>
</blockquote>

With Citation

<blockquote cite="https://example.com/source">
    <p>Quoted content here.</p>
    <footer>
        — <cite>Author Name</cite>
    </footer>
</blockquote>

Common Use Cases

Article Quote

<article>
    <p>Article content...</p>
    <blockquote cite="https://example.com/interview">
        <p>Important quote from an interview.</p>
        <footer>— Interviewee Name</footer>
    </blockquote>
    <p>More article content...</p>
</article>

Testimonial

<blockquote>
    <p>This product changed my life!</p>
    <footer>— Customer Name</footer>
</blockquote>

Styling

Browsers typically indent blockquotes:

<blockquote>
    <p>Quoted content</p>
</blockquote>

<style>
    blockquote {
        border-left: 4px solid #ccc;
        padding-left: 1em;
        margin: 1em 0;
        font-style: italic;
    }
</style>

Best Practices

Include Citations

Always cite sources:

<blockquote cite="https://source.com">
    <p>Quote</p>
    <footer>— Source</footer>
</blockquote>

References

• MDN Web Docs - blockquote element