HTML q Element: Inline Quotes, cite Sources, and Quotation Marks

The HTML q element marks a short quotation within a sentence. Browsers usually add quotation marks automatically, and the cite attribute can record the source URL. That attribute does not create a clickable source link, so provide a separate link in the text when readers need one.

How q, blockquote, and cite differ

Use q when quoting words from another source within the flow of a sentence. For a separate quotation containing several paragraphs, use a block quotation with blockquote. Do not use q merely to highlight a word or add ironic quotation marks.

A complete example with a source and nested quotation

Save the complete code below as inline-quote.html and open it in a browser. The first quotation is a short phrase from the HTML Standard. The second is fictional dialogue written to demonstrate nested quotation marks. No server or JavaScript is required.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>q and quotation sources</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    q { quotes: '“' '”' '‘' '’'; }
    a { overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Short quotations and sources</h1>
  <p>The HTML Standard describes the content represented by q as
    <q lang="en" cite="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element">some phrasing content quoted from another source</q>.</p>
  <p>Source: <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, q element</cite></a></p>
  <p>Fictional dialogue: The student said, <q>The notice says <q>Please close the door</q></q>.</p>
</body>
</html>

The first quotation stays in the same paragraph as the surrounding explanation and is enclosed in quotation marks. In the fictional dialogue, double quotation marks surround the outer quotation and single quotation marks surround the inner quotation. The linked source title appears in its own paragraph; the address in q's cite attribute is not automatically displayed.

Avoid adding duplicate quotation marks

If you type quotation marks immediately before, after, or inside q to surround the same quotation, they can duplicate the browser-generated punctuation. The example puts only the quoted words inside q and leaves the marks to the browser. You can also write quotation marks manually in plain text without q, but do not combine both sets of marks for the same quotation.

The default marks can vary with the language of the document or element and the browser's styles. The example's CSS quotes rule explicitly sets the outer and inner pairs so you can compare the results clearly. Remove that rule to compare the defaults, then restore it. Changing the appearance does not remove the q element's meaning as a quotation.

Make the source available to readers

The cite attribute is optional. Use an address that provides the original passage or its context, rather than an unrelated home page. If readers need to read the original, also provide an a element with specific link text, as in the example. Copy the verified wording accurately and distinguish the quotation from your own explanation.

Do not assume that every screen reader announces the start and end of a q quotation in the same way. When attribution matters, make the sentence itself identify who said what, for example, “The standard describes …”. For definitions and usage conditions, consult the HTML Standard's definition of q and the MDN q reference.