HTML <q> Tag

The HTML <q> tag is used to define a short, inline quotation within a document. Unlike block quotations (<blockquote>), which represent longer, standalone quotations, the <q> tag is intended for brief quotes that appear within a paragraph or other inline content. Browsers typically render the content within the <q> tag with quotation marks, but this behavior can be customized with CSS.

Syntax

<q cite="URL">Quoted text</q>

Attributes

Example

<p>As Albert Einstein famously said, <q cite="https://en.wikiquote.org/wiki/Albert_Einstein">"The important thing is to never stop questioning."</q></p>

More Examples

Basic Inline Quote

<p>The guide explained, <q>Always double-check your code.</q></p>

This example demonstrates the most basic use of the <q> tag, marking a short quote within a paragraph. The browser will typically render this with quotation marks.

Using the cite Attribute

<p>In her book, the author wrote, <q cite="https://example.com/book">"Life is what happens when you're busy making other plans."</q></p>

Here, the cite attribute provides the URL of the source material. Although this URL isn't visually displayed, it's valuable for SEO and accessibility, allowing search engines and screen readers to understand the quote's origin.

Nested Quotes

<p>She said, <q>He told me, <q>“Never give up.”</q></q></p>

HTML allows nesting of <q> tags. Browsers often handle this by using single and double quotes alternatively, improving readability.

Styling Quotes with CSS

<style>
  q {
    quotes: "“" "”" "‘" "’";
    color: navy;
  }
  q:before { content: open-quote; }
  q:after  { content: close-quote; }
</style>

<p>The professor emphasized, <q>“The only way to do great work is to love what you do.”</q></p>

This example shows how CSS can be used to customize the appearance of the quotes, including the type of quotation marks used and their color. We use the quotes property to specify quote marks, and the :before and :after pseudo-elements for rendering the content.

Quoting a dialogue

<p>He asked, <q>Did you finish the report?</q> she replied <q>Not yet.</q> </p>

A practical way to show short spoken parts in a story or any conversation.

Browser Support

The <q> tag is widely supported across all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• Use Sparingly: The <q> tag is for short, inline quotations. For longer, block-level quotes, use the <blockquote> tag instead.
• Semantic Meaning: Using the <q> tag adds semantic meaning to your HTML, making it more understandable for both browsers and screen readers. This can improve accessibility and SEO.
• cite Attribute: Although not visible, the cite attribute provides valuable information about the source of the quote, enhancing SEO and accessibility. Always use it when you know the source.
• Customization: You can customize the appearance of quotation marks (or even omit them entirely) using CSS. This is especially useful for nested quotes and when specific styling is required.
• Accessibility: The <q> tag provides better accessibility than simply adding quotes within a sentence. Screen readers can identify and announce the content as a quotation.
• Quotation Marks: Browsers typically display content within <q> tags with quotation marks. You may override this behaviour with CSS, but keep accessibility in mind.
• Context: Always consider the context when using the <q> tag. Ensure that the short quotation is appropriate for an inline element.
• Nested Quotes: When using nested quotes, be aware of how browsers may display them (with alternating single and double quotes). CSS can be used to control the presentation.
• Don't use <q> for titles or names: Use <cite> for titles of works, not <q>.
• Avoid misuse: Don't misuse the <q> tag just to add quotes. It is specifically for quotations.