<q> Inline quotation
A short quotation inside a sentence. The browser adds the quote marks.
<q> wraps a short quotation in running text. Browsers add the quotation marks for you, choosing marks that suit the page language.
If you type quote characters as well, readers see them twice. Long quotations that form their own block go in <blockquote>. The optional cite attribute holds the source URL, though nobody sees it.
The q element in the HTML Living Standard (opens in a new tab) explains that browsers insert quotation marks suited to the language. The Quotes and Code lesson compares it with blockquote.
Syntax
<q cite="https://example.com">Short quote</q>When to use it
<q> is for a quote that runs inside your own sentence: a line from a review on a product page, a short answer from an interview in a news story, or a phrase from a speech in a history essay. If the quotation fills its own paragraph, use blockquote instead.
Quotes inside quotes work naturally: nest one q in another and browsers switch to the secondary style, such as single marks inside double marks in English. The marks also follow the page language, so a French page gets guillemets.
The standard is clear about one misuse: q is only for real quotations. Scare quotes, sarcasm ("a great idea"), or a word talked about as a word are not quotes from a source, so type the quotation marks yourself or use i for words mentioned as words. Also avoid q around text a reader may copy, such as a command, because the generated marks are not always copied the same way in every browser.
Attributes
| Attribute | What it does |
|---|---|
cite | URL of the source of the quotation (not displayed). |
Live example
Edit the code and watch the preview.
<p>My teacher always said <q>Close every tag you open.</q></p>More examples
Quote inside a quote
Nested q elements get different quotation marks automatically. In English, the outer quote uses double marks and the inner quote uses single marks, without typing any of them. The quote marks come from the browser, not from typed characters.
<p lang="en">Mia told me: <q>The chef looked at the plate and said <q>These are the best pancakes in town</q>, then asked for more.</q></p>Language-specific quotation marks
Current browsers pick quotation marks from the language of the text. The same q element shows English marks in the first paragraph and French guillemets in the second. No quote characters are typed in the source.
<p lang="en">She said <q>Good morning</q> and smiled.</p>
<p lang="fr">Elle a dit <q>Bonjour</q> en souriant.</p>
<p lang="de">Sie sagte <q>Guten Morgen</q> und lachte.</p>Tip: Let q add the quote marks. Don't type your own.
Browser support
q is supported by all browsers. Very old versions of Internet Explorer (7 and earlier) did not add quotation marks. Language-aware marks come from the CSS quotes property with its default value of auto; check the q element support table (opens in a new tab) for details.
Accessibility
Some screen readers skip the quotation marks q generates, so the sentence itself should make clear who is being quoted. Quote mark styles also vary by language, as Wikipedia's overview of quotation marks (opens in a new tab) shows. Set lang to get the right ones.
Common mistakes
Wrong
<q>"Hello," she said.</q>Right
<q>Hello,</q> she said.q adds its own quotation marks, so typed ones show up twice. Only the quoted words go inside.
Frequently asked questions
Does the q tag add quotation marks automatically?
Yes. Browsers insert quotation marks before and after <q> content through CSS, and they pick language-appropriate ones from the lang attribute, German or French styles for example. Type your own inside it and readers get two sets.
When should I use q instead of quotation marks?
When you quote another source inline and want that relationship to be machine readable, optionally with a cite URL, reach for <q>. Sarcasm, scare quotes and a word under discussion are not quotations from a source, so ordinary typed quotation marks are correct there.