The <q> Element
As defined in the HTML Living Standard, the <q> element represents a phrasing-level (inline) quotation.
The developer said, Accessibility is the floor, not the ceiling.
and everyone in the room agreed.
(Note: The quotation marks you see above are generated automatically by the browser.)
<p>
She whispered, <q>We should use semantic tags.</q>
</p>
View HTML Living Standard: The q element
Automated Punctuation
The <q> element is unique because user agents (browsers) are expected to wrap its contents in quotation marks automatically.
- No Manual Quotes: You should not include quotation marks inside the
<q>tag itself. - Language Support: Browsers use the
langattribute of the document or parent element to determine which type of quotation marks to use (e.g., using« »for French). - Nesting: When
<q>elements are nested, browsers are expected to alternate between double and single quotation marks.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using the <q> tag, you explicitly mark the text as a quotation in the DOM. While many screen readers do not currently announce "quote" and "end quote" for inline quotations by default, the semantic data is there for users who enable specific settings or use specialized tools. This ensures the relationship between the speaker and the quoted text is robust and future-proof.
Q vs. Blockquote
It is essential to use the correct tool for the scope of the quotation:
<q>: For short, inline quotations that are part of the current paragraph flow.<blockquote>: For long, block-level quotations that are set off from the main text.
A11y Tip: Use of the Cite Attribute
Like <blockquote>, the <q> element supports a cite attribute for providing a URL to the source. However, this is not visible to users. To ensure WCAG SC 1.3.1 compliance for all users, always provide visible attribution in the text if the source is important.