q: The Inline Quotation element

The <q> HTML element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text with quotation marks. This element is intended for short quotations that don’t require paragraph breaks; for long quotations use the <blockquote> element.

Attributes

Specific attributes

Recommended attributes

cite="[URL]" specifies the URL of the source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<p>As Tim Berners-Lee said, <q cite="https://www.w3.org/People/Berners-Lee/FAQ.html">The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.</q></p>

<p>The IndieWeb principle is simple: <q>Own your data, control your experience, and connect with others on your own terms.</q></p>

<p>When building for the web, remember: <q cite="https://indieweb.org/principles">Use what you need, ignore what you don't.</q></p>

<p>A community member once told me, <q>Your personal website is your digital garden  tend it with care and let it grow naturally.</q></p>