HTML Text and Links
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 Example
html
<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 Example
html
<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.
Q Tag Example
html
<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.
Cite Example
html
<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.
Abbr Example
html
<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 Tag Example
html
<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
Combined Example
html
<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.