<q> - The Inline Quotation Element

The `<q>` Element

Inline HTML 4.0

The inline quotation element represents a short quotation that doesn’t require paragraph breaks. Browsers automatically add quotation marks around the content.

Quick Example

<p>As Einstein said, <q>Imagination is more important than knowledge.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>As Einstein said, <q>Imagination is more important than knowledge.</q></p>

Syntax

<q>quoted text</q>

Browsers automatically add appropriate quotation marks based on the language setting.

Attributes

Optional Attributes

Attribute	Description	Example
`cite`	URL to the source of the quotation	`cite="https://example.com/source"`

<p>He said, <q cite="https://example.com/speech">We shall overcome.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>He said, <q cite="https://example.com/speech">We shall overcome.</q></p>

Common Use Cases

Inline Quotes

<p>The professor said, <q>The exam will be postponed until next week.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The professor said, <q>The exam will be postponed until next week.</q></p>

Dialogue

<p>She asked, <q>What time does the meeting start?</q></p>
<p>I replied, <q>It starts at 3 PM.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>She asked, <q>What time does the meeting start?</q></p>
<p>I replied, <q>It starts at 3 PM.</q></p>

Famous Quotes

<p>Mark Twain once wrote, <q>The secret of getting ahead is getting started.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Mark Twain once wrote, <q>The secret of getting ahead is getting started.</q></p>

Short Citations

<p>According to the manual, <q>Always save your work before closing.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>According to the manual, <q>Always save your work before closing.</q></p>

Nested Quotations

The browser handles nested quotes correctly:

<p>John said, <q>Mary told me, <q>I'll be there at noon.</q></q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>John said, <q>Mary told me, <q>I'll be there at noon.</q></q></p>

<!-- Short inline quotations -->
<p>He said, <q>I'll be right back.</q></p>

Use for quotes within running text.

<!-- Longer quotations -->
<blockquote>
  <p>This is a longer quotation that
  spans multiple sentences or paragraphs.</p>
</blockquote>

Use for longer, block-level quotations.

Quotation Marks

Browsers add quotes automatically based on language:

<!-- English: "quotes" -->
<p lang="en">He said, <q>Hello!</q></p>

<!-- French: «guillemets» -->
<p lang="fr">Il a dit, <q>Bonjour!</q></p>

<!-- German: „Anführungszeichen" -->
<p lang="de">Er sagte, <q>Guten Tag!</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- English: "quotes" -->
<p lang="en">He said, <q>Hello!</q></p>

<!-- French: «guillemets» -->
<p lang="fr">Il a dit, <q>Bonjour!</q></p>

<!-- German: „Anführungszeichen" -->
<p lang="de">Er sagte, <q>Guten Tag!</q></p>

With Citation Element

Combine with <cite> for source attribution:

<p>In <cite>To Kill a Mockingbird</cite>, Atticus says, <q>You never really understand a person until you consider things from his point of view.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In <cite>To Kill a Mockingbird</cite>, Atticus says, <q>You never really understand a person until you consider things from his point of view.</q></p>

Styling

Customize the quotation appearance:

<style>
q {
  quotes: '"' '"' ''' ''';
  font-style: italic;
  color: #555;
}
q::before {
  content: open-quote;
  font-weight: bold;
  color: #0066cc;
}
q::after {
  content: close-quote;
  font-weight: bold;
  color: #0066cc;
}
</style>

<p>She said, <q>This is a custom styled quote.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
q {
  quotes: '"' '"' ''' ''';
  font-style: italic;
  color: #555;
}
q::before {
  content: open-quote;
  font-weight: bold;
  color: #0066cc;
}
q::after {
  content: close-quote;
  font-weight: bold;
  color: #0066cc;
}
</style>

<p>She said, <q>This is a custom styled quote.</q></p>

Custom Quote Marks

<style>
.custom-quote {
  quotes: '❝' '❞' '❛' '❜';
}
</style>

<p class="custom-quote">He remarked, <q>These are decorative quotes.</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.custom-quote {
  quotes: '❝' '❞' '❛' '❜';
}
</style>

<p class="custom-quote">He remarked, <q>These are decorative quotes.</q></p>

Real-World Examples

Testimonials

<div class="testimonial">
<p><q>This product changed my life! Highly recommended.</q></p>
<footer>— Sarah Johnson, Customer</footer>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="testimonial">
<p><q>This product changed my life! Highly recommended.</q></p>
<footer>— Sarah Johnson, Customer</footer>
</div>

News Article

<article>
<p>The mayor announced, <q>We are committed to improving public transportation throughout the city.</q></p>
<p>When asked about the timeline, she added, <q>We expect to see changes within the next six months.</q></p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>The mayor announced, <q>We are committed to improving public transportation throughout the city.</q></p>
<p>When asked about the timeline, she added, <q>We expect to see changes within the next six months.</q></p>
</article>

Interview Format

<dl>
<dt>Interviewer:</dt>
<dd><q>What inspired you to start this company?</q></dd>

<dt>CEO:</dt>
<dd><q>I saw a gap in the market and wanted to fill it.</q></dd>

<dt>Interviewer:</dt>
<dd><q>What are your plans for the future?</q></dd>
</dl>

Result

Interactive code playground requires JavaScript. Here's the code:

<dl>
<dt>Interviewer:</dt>
<dd><q>What inspired you to start this company?</q></dd>

<dt>CEO:</dt>
<dd><q>I saw a gap in the market and wanted to fill it.</q></dd>

<dt>Interviewer:</dt>
<dd><q>What are your plans for the future?</q></dd>
</dl>

Product Reviews

<div class="review">
<p>⭐⭐⭐⭐⭐</p>
<p>Reviewer says: <q>Excellent quality and fast shipping.</q></p>
<footer>Review from December 2024</footer>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="review">
<p>⭐⭐⭐⭐⭐</p>
<p>Reviewer says: <q>Excellent quality and fast shipping.</q></p>
<footer>Review from December 2024</footer>
</div>

Don’t Use for Non-Quotations

Wrong
Right

<!-- Don't use <q> for emphasis -->
<p>This is <q>very important</q>.</p>

<p>This is <em>very important</em>.</p>

Manual vs Automatic Quotes

Automatic (Correct)
Manual (Wrong)

<!-- Browser adds quotes -->
<p>He said, <q>Hello!</q></p>

Results in: He said, “Hello!”

<!-- Don't add quotes manually with <q> -->
<p>He said, "<q>Hello!</q>"</p>

Results in: He said, ""Hello!"" (double quotes!)

Accessibility

Screen readers may announce quotations with appropriate intonation, helping convey the quoted nature of the text.

Provide Attribution

When possible, include attribution:

Without Attribution
With Attribution

<p><q>Knowledge is power.</q></p>

<p>As Francis Bacon said, <q>Knowledge is power.</q></p>

Use cite Attribute

The cite attribute provides machine-readable source information:

<p>
  According to the article,
  <q cite="https://example.com/article">climate change is accelerating</q>.
</p>

Language-Specific Quotes

Different languages use different quotation styles:

<style>
[lang="en"] q { quotes: '"' '"' ''' '''; }
[lang="fr"] q { quotes: '« ' ' »' '‹ ' ' ›'; }
[lang="de"] q { quotes: '„' '"' '‚' '''; }
</style>

<p lang="en">English: <q>Hello</q></p>
<p lang="fr">French: <q>Bonjour</q></p>
<p lang="de">German: <q>Guten Tag</q></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
[lang="en"] q { quotes: '"' '"' ''' '''; }
[lang="fr"] q { quotes: '« ' ' »' '‹ ' ' ›'; }
[lang="de"] q { quotes: '„' '"' '‚' '''; }
</style>

<p lang="en">English: <q>Hello</q></p>
<p lang="fr">French: <q>Bonjour</q></p>
<p lang="de">German: <q>Guten Tag</q></p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	4+	Full support
Edge	12+	Full support
IE	8+	Full support

The <q> element has excellent browser support. Automatic quotation marks are supported in all modern browsers.

For longer, block-level quotations. Learn more →

For citing titles of works. Learn more →

<q> - The Inline Quotation Element

The <q> Element

Quick Example

Syntax

Attributes

Optional Attributes

Common Use Cases

Inline Quotes

Dialogue

Famous Quotes

Short Citations

Nested Quotations

<q> vs <blockquote>

Quotation Marks

With Citation Element

Styling

Custom Quote Marks

Real-World Examples

Testimonials

News Article

Interview Format

Product Reviews

Don’t Use for Non-Quotations

Manual vs Automatic Quotes

Accessibility

Screen Reader Behavior

Provide Attribution

Use cite Attribute

Language-Specific Quotes

Browser Support

Related Elements

Specifications

The `<q>` Element

`<q>` vs `<blockquote>`