HTML Quotation and Citation Elements

HTML provides a set of elements to include quotations and citations in web documents.

Quotations and citations are crucial for properly attributing and referencing external sources in your content. In this article, we’ll explore the <blockquote>, <q>, and <cite> elements, along with practical examples to illustrate their usage.

<blockquote> Element

The <blockquote> element is used to represent a section of content that is a quotation from another source. It typically renders the quoted text in a distinct block format, with optional attribution.

<blockquote>
    <p>This is an example of a quoted text.</p>
    <footer>
        — Author Name
    </footer>
</blockquote>

result:

This is an example of a quoted text.

In the example above, we’ve used the <blockquote> element to enclose the quoted text, and the <footer> element to specify the author’s name or the source of the quotation.

<q> Element

The <q> element is used for short inline quotations within a paragraph or sentence. It automatically adds double quotation marks around the text.

<p>Albert Einstein once said: <q>E=mc<sup>2</sup></q>.</p>

result:

Albert Einstein once said: E=mc².

In this example, the <q> element is used to enclose the short quotation, and the browser automatically adds double quotation marks to the text.

<cite> Element

The <cite> element is used to define the title of a work, such as a book, movie, or a web page. It is often used in conjunction with the <blockquote> and <q> elements to provide the source’s title.

<blockquote>
    <p>Life is what happens when you're busy making other plans.</p>
    <footer>
        — <cite>John Lennon</cite>
    </footer>
</blockquote>

result:

Life is what happens when you’re busy making other plans.

In this example, we’ve used the <cite> element to specify the title of the source, which is “John Lennon” in this case.

Examples with All Elements

Now, let’s see how all these elements can work together in a real-world example.

<blockquote>
    <p>One small step for man, one giant leap for mankind.</p>
    <footer>
        — <cite>Neil Armstrong</cite>
    </footer>
</blockquote>

<p>In his famous words, Neil Armstrong once said: <q>One small step for man, one giant leap for mankind.</q></p>

result

One small step for man, one giant leap for mankind.

In his famous words, Neil Armstrong once said: One small step for man, one giant leap for mankind.

In this example, we’ve used both the <blockquote> and <q> elements to show how a longer quotation and a shorter inline quotation can be attributed using the <cite> element.

Summary

Properly using HTML quotation and citation elements, such as <blockquote>, <q>, and <cite>, is essential for maintaining the integrity and accuracy of your web content. These elements help you attribute and reference external sources, ensuring that you give proper credit to the original authors and maintain the transparency of your work. Whether it’s a lengthy quote, a short snippet, or just the title of a source, HTML provides the tools to do it right.