<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

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

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.

Try in Code Playground

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