The q Element – Inline Quotation

Technical Deep Dive & Specifications

WHATWG HTML Living Standard Specification

According to the official WHATWG specification:

"The <q> element represents some phrasing content quoted from another source. Quotation punctuation (such as quotation marks) that is typically used to surround quoted text must not be authored inside the <q> element; the user agent will provide it automatically."

Element Classification & Content Model

• Categories: Flow content, Phrasing content, Palpable content.
• Contexts in which this element can be used: Where phrasing content is expected.
• Content model: Phrasing content.
• Attributes: Global attributes, cite (URL pointing to the source document).

The Under-the-Hood User Agent Mechanics

How does the browser render quotation marks without them being in the HTML?

All compliant web browsers ship with default user-agent CSS rules:

/* Browser Default User-Agent Stylesheet */
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

                          [ RAW HTML: <q>Hello World</q> ]
                                         |
                                         v
                         [ USER AGENT PSEUDO-ELEMENTS ]
                       /                                \
                      v                                  v
           [ ::before (open-quote) ]          [ ::after (close-quote) ]
                      \                                  /
                       +----------------+---------------+
                                        |
                                        v
                            [ RENDERED: “Hello World” ]

The "Double Quotes" Disaster (Anti-Pattern)

When novice developers do this:

<!-- ANTI-PATTERN: Double quotation marks rendered! -->
<p>She said, "<q>The deployment was successful.</q>"</p>

The browser evaluates both the manual quotes AND the pseudo-elements, rendering:

She said, "“The deployment was successful.”" ❌

Rule: Never type quotation marks around or inside <q>!

Nested Quotes & the CSS quotes Property

When a quote exists inside another quote, the browser automatically switches to secondary quotes (e.g., single quotes ‘ ’ inside double quotes “ ” in English):

<p lang="en">
  Dr. Adams stated, <q>As Newton famously declared, <q>If I have seen further it is by standing on the shoulders of Giants</q>, we too must build collaboratively.</q>
</p>

Browser Output:

Dr. Adams stated, “As Newton famously declared, ‘If I have seen further it is by standing on the shoulders of Giants’, we too must build collaboratively.”

You can customize or override quote styles for any language or theme using the CSS quotes property:

/* Syntax: quotes: [level 1 open] [level 1 close] [level 2 open] [level 2 close]; */
[lang="en"] {
  quotes: "“" "”" "‘" "’";
}
[lang="fr"] {
  quotes: "« " " »" "‹ " " ›";
}
[lang="de"] {
  quotes: "„" "“" "‚" "‘";
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 46: lang="en" on container — Instructs browser to use English typographic quotation marks.
• Line 49: <q cite="https://example.com/logs/404">...<q>automated rollback...</q>...</q> — Nested <q> elements automatically shift from primary double quotes “ ” to secondary single quotes ‘ ’.
• Line 56: <div class="quote-card" lang="fr"> — Sets French locale; the <q> inside will automatically render guillemets « ».
• Line 64: <div class="quote-card" lang="de"> — Sets German locale; the <q> inside will automatically render low-opening quotes „ “.
• Line 72: <div class="quote-card" lang="ja"> — Sets Japanese locale; the <q> inside will automatically render corner brackets 「 」.

Expected Browser Render Output

• English: The lead engineer noted, “During the postmortem, the team agreed that ‘automated rollback saved the cluster’ within seconds.”
• French: René Descartes affirmait : « Je pense, donc je suis. »
• German: Friedrich Nietzsche schrieb : „Ohne Musik wäre das Leben ein Irrtum.“
• Japanese: 夏目漱石の有名な冒頭文 : 「吾輩は猫である。名前はまだ無い。」