This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <q> element

The <q> element represents a short inline quotation from another source. It is used when the quoted words belong inside the flow of a sentence rather than standing as a separate block.

This makes it different from <blockquote>. The distinction is structure rather than a strict length limit: <blockquote> groups a quotation as a separate block, while <q> fits within the surrounding sentence.

Browsers normally add quotation marks around the contents of <q>. That means the author should not usually type quotation marks immediately around the element as well, or the result may look doubled.

The optional cite attribute can hold a URL for the source of the quotation. As with <blockquote>, this is not normally a visible citation for the reader. If the source matters to the reader, provide visible source text or a normal link outside the quote.

The <q> element should not be used for scare quotes, irony, nicknames, or words being discussed as words. It is for quoted content, not for every case where quotation marks might appear in writing.

A quotation can contain another <q> for quoted words within it. The example below uses two levels of quotation without manually adding quotation marks. Their appearance is controlled by the browser and CSS, including the quotes property, and can vary with language and styling.

Attributes: cite, GLOBALS.

Typical layout:
<p>She said, <q>The guide says <q>Start here</q>.</q></p>
Visual representation:

She said, The guide says Start here.