q

Represents an inline quotation.

Description

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

Basic Example

She said Hello, world! and smiled.

<p>She said <q>Hello, world!</q> and smiled.</p>

With Citation

The cite attribute provides a URL for the source of the quotation:

According to the documentation, this feature is experimental.

<p> According to the documentation, <q cite="https://example.com/docs">this feature is experimental</q>. </p>

Nested Quotations

Browsers will alternate between single and double quotation marks for nested quotes:

He asked, Did she really say I'll be there?

<p> He asked, <q>Did she really say <q>I'll be there</q>?</q> </p>

With Language Attribute

Use the lang attribute to specify the language of the quotation. Browsers may use language-appropriate quotation marks:

The French phrase C'est la vie means "That's life."

<p> The French phrase <q lang="fr">C'est la vie</q> means "That's life." </p>

Attributes

Attribute Description
cite A URL pointing to the source of the quotation

This element also supports global attributes.

Accessibility

Screen readers typically announce the quotation marks that browsers add around <q> content. The semantic markup helps convey that the text is a quotation rather than regular content.

Related Elements

  • <blockquote> - For longer, block-level quotations
  • <cite> - For citing the title of a work