HTML Quotation Elements
Learn the four HTML quotation elements — blockquote, q, abbr, and address — with examples, live browser previews, SEO benefits, and best practices.
- What are Quotation Tags?
- blockquote Tag
- q Tag (Inline Quotes)
- abbr Tag
- address Tag
- SEO Benefits
- Try It Yourself
What are HTML Quotation Elements?
HTML quotation elements are semantic tags used to mark up content that is quoted from another source, abbreviated, or used as contact information. They give meaning and context to your content — helping browsers, search engines, and screen readers understand what the text represents.
The <blockquote> Element
<blockquote> — Block Quotation
The <blockquote> tag defines a long quotation taken from an external source. Browsers automatically indent the content. Always use the cite attribute to link to the original source — this helps search engines understand the citation.
<!DOCTYPE html> <html lang="en"> <body> <p>Here is a quote from TipsInLearning:</p> <blockquote cite="https://tipsinlearning.blogspot.com"> Learning web development is a journey, not a destination. Start with HTML, build your foundation, and the rest will follow. Every expert was once a beginner. </blockquote> </body> </html>
Here is a quote from TipsInLearning:
Learning web development is a journey, not a destination. Start with HTML, build your foundation, and the rest will follow. Every expert was once a beginner.
You can also style blockquotes with CSS to make them look more professional on your site:
Learning web development is a journey, not a destination. Start with HTML, build your foundation, and the rest will follow. Every expert was once a beginner.
— TipsInLearning<style> blockquote { border-left: 4px solid #7c3aed; background: #f3eeff; padding: 1rem 1.5rem; border-radius: 0 12px 12px 0; font-style: italic; color: #475569; } </style>
The <q> Element — Inline Quotes
<q> — Short Inline Quotation
The <q> tag is for short inline quotes that fit within a sentence. Browsers automatically add quotation marks (" ") around the quoted text. No indentation — the quote flows within the paragraph.
<p>TipsInLearning's goal is to: <q>make web development free for everyone.</q> </p> <p>Einstein once said: <q>Imagination is more important than knowledge.</q> </p>
TipsInLearning's goal is to: make web development free for everyone.
Einstein once said: Imagination is more important than knowledge.
The <abbr> Element — Abbreviations
<abbr> — Abbreviations & Acronyms
The <abbr> tag marks text as an abbreviation or acronym. The title attribute holds the full expansion — when users hover over the abbreviation, the full text appears as a tooltip. This is also very helpful for screen readers and search engines.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>I am learning <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p> <!-- Common abbreviations --> <abbr title="National Aeronautics and Space Administration">NASA</abbr> <abbr title="As Soon As Possible">ASAP</abbr>
The WHO was founded in 1948.
I am learning HTML and CSS.
↑ Hover over WHO, HTML, or CSS to see the full expansion tooltip
The <address> Element
<address> — Contact Information
The <address> tag defines contact information for the author or owner of a document. It can include an email address, URL, physical address, phone number, or social media handle. Browsers render it in italic by default with a line break before and after.
<address> Written by TipsInLearning.<br> Visit us at:<br> <a href="https://tipsinlearning.blogspot.com"> tipsinlearning.blogspot.com </a><br> Himachal Pradesh, India </address>
SEO Benefits of Quotation Tags
Using semantic HTML quotation tags correctly can improve your search engine rankings:
- ✓<blockquote cite=""> — the cite attribute tells Google the original source, building topical authority
- ✓<abbr title=""> — helps translation systems and search engines understand abbreviations
- ✓<address> — improves local SEO and helps search engines identify authorship
- ✓All quotation tags use semantic HTML which Google's algorithms understand better than unstyled text
Best Practice: Always add the cite attribute to <blockquote> with the URL of the original source. This is good for attribution, accessibility, and SEO — even though it's not visible to users.