MakeW3web

Blockquotes and Citation

In HTML, blockquotes and citations are used to indicate quotations or excerpts from other sources, providing proper attribution and context. The `<blockquote>` element is used for longer, block-level quotations, while the `<q>` element is used for inline quotations. To provide attribution for the quotation, the `<cite>` element can be used.

Here's an explanation of these elements and examples of how to use them:

  1. `<blockquote>`: The `<blockquote>` element is used to represent a long quotation or excerpt from another source, typically displayed as an indented block of text separate from the main content. It is often used to quote paragraphs or multiple lines of text.

Example:

<p>According to the famous author:</p>
<blockquote>
  The quick brown fox jumps over the lazy dog. This sentence contains every letter of the English alphabet and is often used to display fonts or test typing skills.
</blockquote>
  1. `<q>`: The `<q>` element is used for short, inline quotations or excerpts from other sources. Browsers typically render the text inside the `<q>` element with quotation marks.

Example:

<p>As the saying goes, "<q>When in Rome, do as the Romans do</q>."</p>
  1. `<cite>`: The `<cite>` element is used to provide attribution or a reference for the source of a quotation or other creative work. It is typically displayed in italics.

Example:

<blockquote>
  To be, or not to be: that is the question.
  <cite>William Shakespeare, Hamlet</cite>
</blockquote>

Here's an example that combines these elements:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Blockquotes and Citations Example</title>
</head>
<body>
    <h1>Using Blockquotes and Citations</h1>
    
    <p>Here's a famous quote from a book:</p>
    <blockquote>
        It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness...
        <cite>Charles Dickens, A Tale of Two Cities</cite>
    </blockquote>
    
    <p>An example of an inline quotation:</p>
    <p>Albert Einstein once said, "<q>Imagination is more important than knowledge</q>."</p>
    
    <p>Combining blockquote, inline quotation, and citation:</p>
    <blockquote>
        In the words of Mahatma Gandhi: "<q>Be the change you wish to see in the world</q>."
        <cite>Source: Various biographies of Mahatma Gandhi</cite>
    </blockquote>
</body>
</html>

Using the `<blockquote>`, `<q>`, and `<cite>` elements in your HTML content allows you to properly attribute quotations and excerpts from other sources, improving the credibility and context of your content. Make sure to use these elements when quoting or referencing external sources to give credit where it's due.

Was this page helpful?