Quotations in HTML are used to represent quoted text, and there are specific HTML elements designed for this purpose. The two primary tags for quotations are <blockquote> and <q>, each serving a different purpose and offering distinct formatting.

1. The <blockquote> Element

The <blockquote> element is used for longer, block-level quotations. It is typically used when quoting entire paragraphs or sections of text from another source. By default, most browsers indent the content within a <blockquote> to visually distinguish it from the surrounding text.

Syntax

<blockquote>
    Quoted text goes here.
</blockquote>

Example

<blockquote>
    The only limit to our realization of tomorrow is our doubts of today.
    — Franklin D. Roosevelt
</blockquote>

Attributes

• cite attribute: This optional attribute specifies the source of the quote, usually as a URL.

  Example:

  <blockquote cite="https://www.example.com/famous-quotes">
      The journey of a thousand miles begins with one step.
      — Lao Tzu
  </blockquote>
  

2. The <q> Element

The <q> element is used for shorter, inline quotations within a block of text. Unlike <blockquote>, the <q> element does not create a new block of content; instead, it wraps the quoted text inline. Browsers usually render this by adding quotation marks around the text.

Syntax

<p>
    He said, <q>This is the best day ever!</q>
</p>

Example

<p>
    Albert Einstein once said, <q>Imagination is more important than knowledge.</q>
</p>

Attributes

• cite attribute: Like <blockquote>, the <q> element can also have a cite attribute to specify the source of the quote.

  Example:

  <p>
      According to Albert Einstein, <q cite="https://www.example.com/quotes">Imagination is more important than knowledge.</q>
  </p>
  

3. CSS Styling for Quotations

While browsers apply default styles to both <blockquote> and <q> elements, you can customize their appearance using CSS.

Example: Customizing <blockquote>

<style>
    blockquote {
        border-left: 5px solid #ccc;
        margin-left: 20px;
        padding-left: 15px;
        font-style: italic;
        color: #555;
    }
</style>

<blockquote>
    To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.
    — Ralph Waldo Emerson
</blockquote>

Example: Customizing <q>

<style>
    q {
        quotes: "“" "”" "‘" "’";
        color: #333;
        font-weight: bold;
    }
</style>

<p>
    The teacher said, <q>Hard work beats talent when talent doesn’t work hard.</q>
</p>

4. Accessibility Considerations

When using <blockquote> and <q>, ensure that the context of the quote is clear. Providing the cite attribute can help users understand where the quote originated, which is especially important for screen readers and other assistive technologies.

5. Best Practices

• Use <blockquote> for lengthy quotations: If you're quoting more than a sentence or two, or if the quote stands alone as a distinct section, use <blockquote>.
• Use <q> for shorter, inline quotations: If you're quoting a short phrase or sentence within a paragraph, use <q>.
• Provide citation where possible: If the source of the quote is important, use the cite attribute to reference the origin.