👀 Live Preview
Einstein quote inline in a paragraph:
Albert Einstein once said, Imagination is more important than knowledge.
HTML <q> Tag
Overview
What You’ll Learn
The <q> tag marks short inline quotations in running text. This guide covers syntax, the cite attribute, comparisons with blockquote, and best practices for beginners.
Inline Quotes
Short phrases in text.
cite URL
Link to source.
vs blockquote
Inline vs block.
Quote Marks
Browser styling.
Semantic HTML
Meaningful markup.
Accessible
Clear quotations.
Fundamentals
What Is the <q> Tag?
The <q> tag is an HTML element specifically designed to encapsulate short inline quotations. It is meant to be used within paragraphs or text-based content to distinguish quoted material from the surrounding text.
Valid HTML — Inline Quotation Element
Browsers add quotation marks around <q> content. Use it for brief quotes inside sentences, not for long block-level passages.
For longer quotations that stand on their own, use <blockquote> instead.
Foundation
📝 Syntax
Surround quoted text with opening <q> and closing </q> tags:
syntax.html
<p>In Shakespeare's famous play, Juliet implores Romeo to "<q>deny thy father and refuse thy name</q>."</p>Syntax Rules
- Place
qinside block text such asp, not as a standalone page section. - Do not type manual quote marks inside
q— browsers add them automatically. - Use
citefor the source URL when you have one. - Reserve
blockquotefor multi-sentence or block-level quotes.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic inline quote | <q>text</q> | Inside a sentence |
| With source URL | cite="https://..." | Not visible |
| Display | Inline | Flows with text |
| Long quotes | Use blockquote | Block-level |
| Work titles | Use cite element | Not for quote text |
| Browser support | Universal | All browsers |
Comparison
⚖️ <q> vs <blockquote>
| Feature | <q> | <blockquote> |
|---|---|---|
| Display | Inline | Block-level |
| Best for | Short phrases | Longer passages |
| Default style | Quotation marks | Indented block |
| cite attribute | Yes | Yes |
Reference
🧰 Attributes
The <q> tag supports the cite attribute to reference the quotation source:
attributes.html
<q cite="https://example.com/quotations">Your quoted text here</q>cite SourceURL pointing to the document where the quotation comes from.
cite="https://..."class CSSGlobal attribute for custom quote styling.
class="pull-quote"lang LanguageSets quote language for correct quotation mark glyphs.
lang="fr"Hands-On
Examples Gallery
Embed short quotations inline and attribute them to sources with cite.
📚 Common Use Cases
The <q> tag embeds short inline quotations seamlessly within paragraphs and links them to sources when needed.
Inline Quotations
The primary use of q is for embedding short, inline quotations seamlessly within a paragraph.
inline-quotations.html
<p>Albert Einstein once said, "<q>Imagination is more important than knowledge.</q>"</p>Citation Reference
Include the cite attribute to attribute the quotation to its source.
citation-reference.html
<q cite="https://www.brainyquote.com/quotes/albert-einstein-131205">
Imagination is more important than knowledge.
</q>A11y
♿ Accessibility
- Use q for short quotes — Screen readers can identify quoted text semantically.
- Add cite when possible — Provides a machine-readable source reference.
- Do not confuse with cite element —
citeelement marks work titles;qholds the quoted words. - Provide visible attribution — For important quotes, name the speaker in surrounding text.
🧠 How <q> Works
1
Author wraps quote text
Place the quoted phrase inside q within a sentence.
Markup
2
Browser adds quote marks
Default styles insert language-appropriate quotation glyphs.
Render
3
cite stores source URL
The cite attribute links to the original document.
Reference
=
Clear inline citations
Readers see quoted material distinguished from your own prose.
Compatibility
Browser Support
The <q> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Inline quotes everywhere
All browsers render <q> with quotation marks and support the cite attribute.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<q> tag 100% supported
Bottom line: Use <q> confidently for inline quotations in any browser.
Wrap Up
Conclusion
Mastering the <q> tag empowers web developers to seamlessly integrate inline quotations into their content. By following best practices and understanding browser support, you can ensure a consistent and engaging user experience for your audience.
Pro Tips
💡 Best Practices
✅ Do
- Use
qfor short inline quotations - Provide
citewhen you have a source URL - Name the speaker in surrounding text when helpful
- Use
blockquotefor longer passages
❌ Don’t
- Wrap entire paragraphs in
q - Add manual quote marks inside
q - Confuse
citeattribute withciteelement - Use
qfor block-level long quotes
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <q>
Bookmark these before you cite sources inline.
6
Core concepts 01
Inline quote
Short phrases in text.
Behavior 02
cite URL
Source reference.
Attributes 03
Not blockquote
Inline vs block.
Semantics 04
Quote marks
Browser default.
Style 05
Not cite el
Quote vs title.
Distinction 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It marks short inline quotations inside running text.
It holds a URL to the quotation source; it is not shown on the page.
Use
blockquote for longer, block-level quotations that stand apart from the paragraph.No. Browsers insert quotation marks automatically around
q content.Yes. Full support in every major browser.
Mark Inline Quotations
Practice <q> with cite and inline examples in the Try It editor.
About the author
6 people found this page helpful