Back to All Tags

<q>

Defines a short inline quotation

Definition and Usage

The <q> element establishes a short quotation.

Browsers normally insert quotation marks around the quotation automatically. The quotation marks are added by the browser and are not part of the content.

The <q> tag is used for short, inline quotations. For long quotations that should be displayed as a separate block, use the <blockquote> tag instead.

Tip: Use the cite attribute to specify the source URL of the quotation.
Note: The quotation marks are automatically added by the browser and vary depending on the language settings.

Browser Support

The <q> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
cite URL Specifies the source URL of the quotation

The <q> tag also supports the Global Attributes in HTML.

The <q> tag also supports the Event Attributes in HTML.

Examples

Basic Inline Quote

Create a simple inline quotation:

Example

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

Quote with Cite Attribute

Include the source URL of the quotation:

Example

<p>According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/manifesto/">The Internet is a global public resource that must remain open and accessible.</q></p>

Nested Quotes

Use nested <q> tags for quotes within quotes:

Example

<p>He said, <q>She told me, <q>HTML is easy to learn!</q> and I agreed.</q></p>

Multiple Languages

Different languages use different quotation marks:

Example

<!-- English -->
<p lang="en">The motto is <q>To be or not to be</q>.</p>

<!-- French -->
<p lang="fr">La devise est <q>Libert, galit, fraternit</q>.</p>

<!-- German -->
<p lang="de">Das Motto lautet <q>Einigkeit und Recht und Freiheit</q>.</p>

Styled Quotes

Customize the appearance of quotations with CSS:

Example

<style>
  q {
    font-style: italic;
    color: #555;
  }

  /* Custom quotation marks */
  q::before {
    content: '"';
    color: #745af2;
    font-weight: bold;
    font-size: 1.2em;
  }

  q::after {
    content: '"';
    color: #745af2;
    font-weight: bold;
    font-size: 1.2em;
  }
</style>

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

Quote vs Blockquote

Compare inline and block quotations:

Example

<!-- Inline quote for short quotations -->
<p>He said <q>Hello, World!</q> and continued speaking.</p>

<!-- Block quote for longer quotations -->
<blockquote>
  <p>This is a longer quotation that spans multiple lines and should be displayed as a separate block of text. It provides more context and detail than a short inline quote.</p>
</blockquote>

Q vs Blockquote

Understanding the difference between <q> and <blockquote>:

Feature <q> <blockquote>
Display Inline element (flows with text) Block-level element (separate block)
Use Case Short quotations within a paragraph Long quotations, multiple paragraphs
Quotation Marks Automatically added by browser Not automatically added
Length Typically one sentence or phrase Can be multiple paragraphs
Styling No default visual styling Default indentation/margins
Rule of Thumb: Use <q> for short, inline quotations (a few words or a sentence). Use <blockquote> for longer quotations that should stand alone as a separate block.

Quotation Marks Styling

Browsers automatically add quotation marks to <q> elements. You can customize these using CSS:

  • Browser Default: Most browsers use curly quotes (" ") for English
  • Language-Specific: Quotation marks change based on the lang attribute
  • CSS quotes Property: Customize quotation marks with the quotes property

Custom Quotation Marks Example

<style>
  /* Set custom quotation marks */
  q {
    quotes: "" "" "9" ":";
  }

  /* First level quotes use   */
  /* Nested quotes use 9 : */

  /* Remove quotation marks entirely */
  q.no-quotes {
    quotes: none;
  }
</style>

<p>Example: <q>This uses custom quotes</q></p>
<p>No quotes: <q class="no-quotes">This has no quotation marks</q></p>

Accessibility and Semantic Meaning

  • The <q> tag provides semantic meaning, indicating quoted text to screen readers
  • Screen readers may announce quotations differently from regular text
  • The cite attribute provides machine-readable source information
  • Helps search engines understand the content structure and attribution
  • Improves SEO by properly marking up quoted content
Accessibility Tip: Always use semantic HTML tags like <q> instead of manually adding quotation marks with keyboard characters. This ensures proper interpretation by assistive technologies.

Try it Yourself

Interactive Example

See how the <q> tag works:

Albert Einstein once said, Imagination is more important than knowledge.

He also mentioned, The important thing is not to stop questioning. Curiosity has its own reason for existing.

Notice how the browser automatically adds quotation marks around the quoted text.

Best Practices

  • Use <q> for short, inline quotations within a paragraph
  • Use <blockquote> for longer quotations that should be displayed as separate blocks
  • Include the cite attribute when the source URL is available
  • Let the browser add quotation marks automatically - don't add them manually
  • Use the lang attribute for quotations in different languages
  • Don't use <q> for decorative quotation marks - use CSS instead
  • Combine with <cite> tag to provide attribution when needed
  • Ensure semantic correctness for better accessibility and SEO

Language-Specific Quotation Marks

Different languages use different quotation mark styles:

  • English: "..." (curly double quotes)
  • French: ... (guillemets)
  • German: ..." (low-high quotes)
  • Spanish: ... (guillemets)
  • Japanese: ... (corner brackets)

The browser automatically selects appropriate quotation marks based on the lang attribute or document language.

Default CSS Settings

Most browsers will display the <q> element with the following default values:

Default CSS

q {
  display: inline;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

Related Tags

  • <blockquote>

    Defines a long block quotation

  • <cite>

    Defines the title of a work

  • <abbr>

    Defines an abbreviation

  • <em>

    Defines emphasized text

  • <mark>

    Defines marked or highlighted text