<q>

Overview

The <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

Using the <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.

Attribute Breakdown

The <q> element, along with global attributes, has a distinct attribute to further define its behavior.

Accessibility Aspects

The <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.

Associated Elements

• <blockquote>
• <cite>

Additional Notes

• The <q> element must not be used in place of quotation marks that do not represent quotes, such as marking up sarcastic statements.

• The CSS quotes property can be utilized to influence the type and style of quotation marks that browsers apply to the <q> element.

• While 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.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: q

The HTML Living Standard Specification: q