<q> element is used to signify a segment of text as a short inline quotation. It's intended to mark short quotations fitting within the ongoing flow of a paragraph.
Examples and Usage
<q> element can be as straightforward as embedding a short quote within a sentence.
<p>The expert mentioned: <q>Modern web design involves responsive techniques.</q> We thoroughly agree.</p>
Note: The implementation of this in many modern browsers typically results in surrounding the content of the
<q>element with quotation marks.
When referencing a specific source or origin for the quotation, the
cite attribute comes into play. The value of this attribute provides a link to the source of the quote, serving as a reference. However, it's worth noting that this link isn't directly displayed to users but rather acts as metadata for the quotation:
<p>The author on Web Reference remarks: <q cite="https://webreference.com/css/properties/quotes/">Typography can differ across languages, especially with quotation marks.</q></p>
The usage we highlighted provides a clear advantage over plain quotation punctuation. It handles the insertion of quotation marks automatically, reinforcing the intended semantic significance within web documents.
<q> element, along with global attributes, has a distinct attribute to further define its behavior.
|A URL pointing to the source of the quotation. This link isn't displayed directly to users but serves as a reference for the quoted information.|
<q> element doesn't introduce any direct accessibility concerns. However, it's essential to ensure that the content remains understandable when read out by screen readers. Screen readers read out the content inside a
<q> element as regular text.
Regarding ARIA roles and attributes, the
<q> element should not have any specific role attributed to it. Furthermore, it's prohibited to name the
<q> element using ARIA naming attributes.
<q>element must not be used in place of quotation marks that do not represent quotes, such as marking up sarcastic statements.
quotesproperty can be utilized to influence the type and style of quotation marks that browsers apply to the
<q>element is designed for inline quotations, the
<blockquote>element is suitable for longer quotes spanning multiple paragraphs.
The cite attribute on the
<q>element points to the source of the quote, acting as metadata in a way. For a more visual citation, the
<cite>element can be used to reference the title of a work or source from which the quotation is derived.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.