Using the HTML `` Element for Short Quotations: Improving Readability and Attribution

Learn how to use the HTML `` element to properly format short quotations within your web content. This tutorial explains the benefits of using ``, demonstrates the use of the `cite` attribute for source attribution, and highlights best practices for improving readability and accessibility.

Using the HTML <q> Element for Short Quotations

What is the <q> Element?

The HTML <q> element (short for "quote") is designed to mark up short quotations. Browsers typically render these with quotation marks around the quoted text, improving readability and context. For longer quotations, consider using the <blockquote> element instead.

Example:

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

The `cite` Attribute

The cite attribute within the <q> tag allows you to specify the source of the quotation as a URL. This is great for attribution and improves accessibility.

Example with `cite` attribute:

<p>WWF's goal is to: <q cite="https://www.worldwildlife.org/discover/our-mission">Build a future where people live in harmony with nature.</q></p>

Browser Support

The <q> element is widely supported by all major browsers.

Styling <q> with CSS

You can style the <q> element using CSS to customize the appearance of the quotation marks or the text itself. Browsers usually add the quotation marks by default but you can control this via CSS if needed.

Example:

q {
  font-style: italic;
}