**`<q>`** is the inline counterpart to `<blockquote>` — meant for short quotations that flow within a sentence, rather than a standalone block. Browsers automatically render the appropriate quotation marks (and can even use language-specific styles, like «guillemets» for some locales, based on the `lang` attribute) around its content, so you should NOT manually type quotation marks inside a `<q>` — that would produce doubled-up marks.
1Understanding <q>
`<q>` is the inline counterpart to <blockquote> — meant for short quotations that flow within a sentence, rather than a standalone block. Browsers automatically render the appropriate quotation marks (and can even use language-specific styles, like «guillemets» for some locales, based on the lang attribute) around its content, so you should NOT manually type quotation marks inside a <q> — that would produce doubled-up marks.
Don't add your own " characters inside <q> — the browser inserts them via CSS (the ::before/::after pseudo-elements with the 'quotes' property), so typing your own results in redundant nested quote marks.
<p>As the saying goes, <q>actions speak louder than words</q>.</p>2Practical Example
Here is a real-world application of <q> showing how it is used in production HTML.
<!-- The optional cite attribute records the source URL (not displayed) -->
<p>The article stated <q cite="https://example.com/article">sales grew 40% this year</q>.</p>3Best Practices
Follow these guidelines when working with <q>:
1. Use <q> for short quotes that fit inline within a sentence
2. Never manually add quotation mark characters inside <q> — let the browser render them
3. Use <blockquote> instead for longer, standalone quotations
Tip: Don't add your own " characters inside <q> — the browser inserts them via CSS (the ::before/::after pseudo-elements with the 'quotes' property), so typing your own results in redundant nested quote marks.
<p>As the saying goes, <q>actions speak louder than words</q>.</p>