<q> represents a short quotation within phrasing content. Browsers normally add quotation marks, including different marks for nested quotes according to styling and language.
A quote in a sentence
The example is invented and identifies the speaker visibly. Do not add literal quotation marks around q unless your presentation specifically requires them; the browser usually supplies a pair.
HTML and CSS
HTML
<p>
In this fictional example, Alex says,
<q cite="https://example.com/notes">Start with one pot.</q>
</p>CSS
q {
quotes: auto;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Source and placement
The optional cite attribute is a source URL. It is not normally displayed as a link or attribution. Write useful credit in the surrounding text and link the source visibly when appropriate.
Q accepts phrasing content. Use blockquote for a quoted passage with paragraph breaks. Do not use q just to draw punctuation around a word that is not a quotation.
Try a change
Add a nested q inside the quotation to inspect the browser’s nested quote styles. Set the document or quote’s lang to the actual language rather than hard-coding English punctuation for every language.
Use cite to identify a creative work’s title; it serves a different purpose from a quotation.
Sources and browser support
MDN: q describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.