The HTML <q> tag
The HTML <q> element marks a short inline quotation within a sentence. Browsers automatically add the appropriate quotation marks, so you do not type them yourself. Use the cite attribute for the source URL.
Overview
The <q> element wraps a short quotation that flows inside the surrounding text. Its defining convenience is that the browser inserts the correct quotation marks for you, so you write the quoted words without adding your own quote characters.
Better still, it respects language: set the lang attribute and the browser uses that language's quotation marks (English "curly quotes", French guillemets, German low-high quotes, and so on). Nesting <q> elements automatically switches to the inner quotation style.
For longer, block-level quotations that stand apart from the text, use <blockquote> instead. As with blockquote, the cite attribute can hold the source URL as metadata.
Syntax
<p>She said <q>hello</q> and left.</p>Attributes
The <q> element supports the following attributes, in addition to the global attributes available to every HTML element.
| Attribute | Value | Description |
|---|---|---|
cite |
A URL. | Cites the source URL of a quote or edit. |
Example
<p>As the saying goes, <q>less is more</q>.</p>Best practices
- Use
<q>for short, inline quotations within a sentence. - Do not add your own quotation marks; the browser inserts them automatically.
- Set the
langattribute so the correct language-specific quotation marks are used. - For longer, block-level quotes, use <blockquote> instead.
Frequently asked questions
Do I need to add quotation marks inside a q element?
What is the difference between q and blockquote?
<q> is for short quotations that flow inline; <blockquote> is for longer, block-level quotations set apart from the text.How do I get the right quotation marks for another language?
lang attribute (e.g. lang="fr") and the browser uses that language's quotation marks.How do I change the quotation marks q uses?
quotes property, or remove them with q { quotes: none; }.