References

Beginner-friendly references for web development, with live, editable examples.

The HTML <q> tag

Element All modern browsers Updated
Quick answer

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

Live 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 lang attribute 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?
No. The browser inserts the appropriate quotation marks automatically, so adding your own would double them.
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?
Add the lang attribute (e.g. lang="fr") and the browser uses that language's quotation marks.
How do I change the quotation marks q uses?
Style them with the CSS quotes property, or remove them with q { quotes: none; }.
progress rp