HTML Quotations & Citations

HTML provides several tags to display quoted text, citations, and references properly.
These tags give meaning and context to text quotes, making your content more readable and semantically correct for browsers and search engines.

The <blockquote> Tag (For Long Quotes)

The <blockquote> tag is used for long quotations that are usually displayed as separate, indented blocks.

<blockquote>
  "The best way to get started is to quit talking and begin doing."
</blockquote>

You can also include the source of the quote using the cite attribute:

<blockquote cite="https://www.example.com/quotes">
  "Success is not final; failure is not fatal: It is the courage to continue that counts."
</blockquote>

The <q> Tag (For Short Quotes)

The <q> tag is used for short, inline quotations within a sentence.
Browsers automatically add quotation marks around the text.

<p>Walt Disney once said, <q>The way to get started is to quit talking and begin doing.</q></p>

The <cite> Tag (For Source Titles)

The <cite> tag is used to reference the title of a creative work - like a book, article, song, or painting.

<p><cite>The Mona Lisa</cite> was painted by Leonardo da Vinci.</p>

📘 Note: The <cite> tag is typically rendered in italic by browsers.

The <abbr> Tag (For Abbreviations)

Although not strictly a quotation tag, <abbr> is often used in the same context to show abbreviations or acronyms with explanations.

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

<!-- Hover to see the text "World Health Organization" -->

📘 Note: hover to see “World Health Organization”

The <address> Tag (For Contact Information)

The <address> tag represents contact details or author information for a document or article.

<address>
  Written by <a href="mailto:info@example.com">John Doe</a>.<br>
  Visit us at:<br>
  123 Web Street, HTML City
</address>

Example: Combining Quotation and Citation Tags

<blockquote cite="https://www.brainyquote.com/quotes/albert_einstein">
  "Life is like riding a bicycle. To keep your balance, you must keep moving."
</blockquote>
<p><cite>Albert Einstein</cite></p>

Displays the quote, cites the author, and attributes the source properly.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML quotation and citation tags make your content more semantic, structured, and credible.
They help browsers, readers, and search engines understand the meaning and origin of text, improving SEO and accessibility of your web pages.