The <q> element marks a short, inline quotation within a sentence. The browser automatically adds quotation marks around it — you should never type them yourself.
Syntax
<q cite="https://example.com/source">quoted text</q>Basic Example
<p>Our mentor always says, <q>consistency beats intensity</q>, and it's proven true for most students.</p>Browser output: the browser wraps the quoted text in quotation marks automatically — "consistency beats intensity" — you only supply the words, not the quote characters.
How It Works
The browser inserts the opening and closing quote marks via its default stylesheet (technically, CSS ::before/::after content). This means the exact quote-mark style (straight vs curly, and even which direction they curl) can vary slightly by browser and by the page's declared language.
Important Attributes
| Attribute | Purpose |
|---|---|
cite | A URL pointing to the source of the quotation — same idea as on <blockquote>, not visually displayed |
Real-World Example
<p>The documentation states that <q cite="https://html.spec.whatwg.org/">the q element represents some phrasing content quoted from another source</q>.</p>Quoting a short definition inline within a sentence, without breaking it out into its own block.
Comparison: blockquote vs q (quick recap)
<blockquote> is for long, block-level quotations with no automatic quote marks. <q> is for short, inline quotations, and the browser adds the quote marks for you. Full table: Blockquote.
Common Mistakes
- Manually typing straight quote characters
"like this"inside a<q>— the browser will add its own on top, producing doubled-up quote marks - Using
<q>for a long, multi-sentence quotation that really belongs in a<blockquote>
Best Practices
- Use
<q>only for short, sentence-level, inline quotes - Let the browser handle quote-mark styling entirely — never add your own quote characters inside it
Accessibility Considerations
Some screen readers verbally indicate the start and end of a quotation when they encounter <q>, depending on the reader and voice in use.
SEO Considerations
Minimal direct effect — mainly relevant as a small structural signal that this text is quoted rather than original.
Browser & Modern HTML Notes
Auto-generated quote-mark styling can vary subtly across browsers and locales (different languages use different quote-mark conventions) — worth a quick cross-browser check if exact quote-mark appearance matters to your design.
Mini Practice
- Rewrite a sentence with manually typed quote marks to use
<q>correctly instead. - Add a
citeattribute to a<q>pointing to where the quote came from.
