<q>: The Q Element
Last updated: 2026-10-13
<q>The Q Element
Defines a short inline quotation; browsers automatically add quotation marks around it.
| Category | Text Content |
|---|---|
| Content Model | Phrasing content |
| Allowed Parents | Any element that accepts phrasing content |
| Content Tag | Yes — requires closing </q> tag |
| Status | Standard |
📝 Syntax
<q>quoted text</q>⚙️ Attributes
This element supports the global attributes plus the following:
| Attribute | Value | Description |
|---|---|---|
cite | URL | A URL pointing to the source of the quotation. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <q> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： <q> adds quotes automatically and localizes them; for block-level quotes use <blockquote>.
❓ FAQ
QWhy use q instead of typing quotation marks?
A
<q> declares this is a quotation: the browser inserts the right marks per language (「」 in Chinese, “” in English), and screen readers recognize the quote semantics. Typed quotation marks are just characters with no semantics that must be swapped manually per locale.QWhat is the difference between q and blockquote?
A
<q> is an inline short quotation used mid-sentence; <blockquote> is a block-level quotation for whole paragraphs. Only q gets automatic quotation marks; blockquote relies on indentation.QCan q be nested?
AYes — nested
<q> means a quote inside a quote, and the browser switches the inner/outer mark styles automatically (double outside, single inside in English). Far easier than typing the marks yourself, and semantically correct.🏷️ Related Tags
💡 Related Cases
📚 Related Tutorials
