HTML <q> Tag

The HTML <q> tag is used to define short inline quotations. It is typically rendered with quotation marks around the content. Unlike the <blockquote> tag, which is used for longer block-level quotations, the <q> tag is designed for inline usage within a paragraph or sentence.

By default, browsers automatically insert quotation marks around the content of the <q> tag, although this behavior can be customized with CSS.

Basic Syntax of HTML <q> Tag

The basic structure of the <q> tag is:

</>
Copy
<q>This is a short quotation.</q>

The browser will automatically render quotation marks around the text enclosed within the <q> tag.

Example of Using the <q> Tag

Here’s an example of an inline quotation within a sentence:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p>
    </body>
</html>

Explanation: The <q> tag wraps the quoted text, and the browser displays it with quotation marks by default.

Styling the <q> Tag with CSS

You can customize the appearance of the <q> tag and control how the quotation marks are displayed using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            q {
                quotes: "«" "»"; /* Use custom quotation marks */
                color: #007BFF;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <p>Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p>
    </body>
</html>

Result: The quotation is styled with blue text, italic font, and custom quotation marks (« »).

Attributes of HTML <q> Tag

  • cite: Specifies the URL of the source of the quotation. This attribute provides context but is not displayed to the user.
  • Global Attributes: Supports all global attributes, such as id, class, and style.

For example, you can include a cite attribute to reference the source of the quotation:

</>
Copy
<p>Albert Einstein once said, <q cite="https://example.com/einstein-quotes">Imagination is more important than knowledge.</q></p>

Note: While the cite attribute adds semantic meaning, its content is not visible by default. Developers can expose it using JavaScript or CSS if needed.

Difference Between <q> and <blockquote> Tags

  • <q>: Used for short, inline quotations. Automatically wraps content with quotation marks.
  • <blockquote>: Used for longer, block-level quotations. Typically indented but does not add quotation marks by default.

Practical Applications of the <q> Tag

  • Inline Quotations: Display short quotes directly within text or paragraphs.
  • Attributing Quotes: Use the cite attribute to reference the source of quotations.
  • Stylized Quotes: Combine the <q> tag with CSS for custom-designed quotation marks.
  • Accessible Content: Semantically mark quotations to enhance accessibility for screen readers.