Table of Contents

Introduction to Quotation and Citation Elements in HTML

HTML provides several elements for quoting, citing, and formatting text in specific ways. These elements help in providing semantic meaning to the content and can be useful for accessibility and SEO purposes.

Using the <blockquote> Element

The <blockquote> element is used for longer quotes that are usually rendered as a separate block of text.

<blockquote cite="https://www.example.com">
    <p>This is a longer quote that might span multiple lines and is typically indented or styled differently from the main text.</p>
</blockquote>

Try it:

Using the <q> Element

The <q> element is used for shorter, inline quotes.

<p>As Shakespeare wrote, <q cite="http://shakespeare.example.com">To be or not to be, that is the question.</q></p>

Try it:

Using the <abbr> Element

The <abbr> element is used to define an abbreviation or acronym.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Try it:

Using the <address> Element

The <address> element is used to provide contact information for the author or owner of a document or article.

<address>
    Written by <a href="mailto:webmaster@example.com">Jimmy Apples</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Wonderland<br>
    USA
</address>

Try it:

Using the <cite> Element

The <cite> element is used to describe a reference to a creative work.

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

Try it:

Using the <bdo> Element

The <bdo> element is used to override the current text direction.

<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Try it:

Best Practices

  • Use <blockquote> for longer, block-level quotes
  • Use <q> for shorter, inline quotes
  • Provide the title attribute for <abbr> elements to explain abbreviations
  • Use <address> for contact information related to the document
  • Use <cite> to reference creative works or sources
  • Use <bdo> when you need to override the text direction