HTML Quotation Tags
HTML Quotation Tags are used to mark quoted text and citations. Common quotation tags include <blockquote> for long quotes, <q> for short inline quotes, <cite> for citing works, and <abbr> for abbreviations.
What are Quotation Tags?
- Quotation tags mark text that is borrowed from another source.
<blockquote>wraps a long quoted block (block-level).<q>wraps a short inline quote with auto-quotation marks.<cite>identifies a creative work like a book or movie.
Why Use Quotation Tags?
Clear Citations
Visibly mark quotes from other sources.
SEO Friendly
Search engines understand quoted content.
Accessibility
Screen readers announce quotes properly.
Academic Use
Perfect for blogs, articles and research papers.
Default Styling
Browsers add italics or indents automatically.
Source Attribution
Use cite attribute to link source URLs.
Quotation Tag Syntax
<blockquote cite="url">Long quote</blockquote><q>Short quote</q><cite>Book Title</cite><abbr title="World Wide Web">WWW</abbr><address>...</address>– contact info
Quotation Tags Example
<!DOCTYPE html>
<html>
<body>
<blockquote cite="https://pbainst.in">
Education is the most powerful weapon you can use to change the world.
</blockquote>
<p>Einstein said: <q>Imagination is more important than knowledge.</q></p>
<p>Source: <cite>The World as I See It</cite></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is a language.</p>
</body>
</html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <blockquote> | Marks a long quoted block. Indented by default. |
| cite | URL of the original source. |
| <q> | Short inline quote with auto quotation marks. |
| <cite> | Title of a referenced work. |
| <abbr> | Abbreviation with full form in title. |
Quotation Tag Family
Use Cases
- Articles: Quote experts or research findings.
- Testimonials: Show user reviews as blockquotes.
- Glossaries: Use abbr for technical terms.
- Footer info: Use address for contact details.
Practice Questions
- Use
<blockquote>to display a famous quote. - Use
<q>inside a paragraph for an inline quote. - Add an
<abbr>with a tooltip for 'CSS'. - Use
<cite>to mark the title of a book.
Frequently Asked Questions
What is the difference between blockquote and q?
blockquote is for long quotes; q is for short inline quotes.
What does cite attribute do?
It provides the URL of the source of the quote.
What is the abbr tag used for?
It marks an abbreviation and shows the full form on hover via the title attribute.
Should I style quotation tags?
Yes, you can customize using CSS but they have nice defaults.
Conclusion
HTML Quotation Tags help you mark borrowed text and provide proper attribution. Use blockquote, q, cite, abbr and address to add clarity, credibility and accessibility to your content.
Additional Tips
- Always cite sources: Use the cite attribute or visible source.
- Style blockquotes: Add a colored left border for impact.
- Use abbr wisely: Provide full meaning in the title.
- Combine with figure: Use figure+figcaption for richer quotes.