q element

Use q for a short quotation inside a sentence. Browsers can add quotation marks according to the document language and CSS.

What does q do?

q is an inline element for a short quotation that fits naturally inside surrounding text. It describes the meaning of the text; it is not merely a way to add decorative quote marks.

<p>She said, <q>Practice makes progress.</q></p>

q or blockquote?

Choose q when the quotation is a short phrase within a paragraph. Choose blockquote when the quotation is a separate, longer section or spans multiple paragraphs.

<blockquote cite="https://example.com/article">
  <p>A longer quotation can stand on its own as a section.</p>
</blockquote>

Quotation source and quotation marks

The optional cite attribute can store the URL of the source, but it is not normally visible or clickable. If readers need to visit the source, provide a normal link as well.

<p>
  The guide says
  <q cite="https://example.com/guide">Keep examples small.</q>
  <a href="https://example.com/guide">Read the source</a>.
</p>

Browsers choose quotation marks from the language and the quotes CSS property. Avoid inserting quotation marks manually if the browser is already adding them.

q {
  quotes: "「" "」" "『" "』";
}

Accessibility tips

• Make the surrounding sentence clear because assistive technology may not announce the visual quotation marks.
• Use the correct document language so quotation styles can adapt appropriately.
• Do not use q only to create a visual effect; use CSS for decoration.

Related pages

• blockquote element
• cite element
• lang attribute
• quotes CSS property