The HTML <q> tag

Definition and Usage

<q> The tag defines a short quote.

Browsers usually insert quotation marks around the quote.

Tip:For long quotes, please use <blockquote> Tag.

See also:

HTML DOM Reference Manual:Quote Object

Instance

Example 1

Mark a brief quote:

<p>The World Wildlife Fund's goal is:
<q>Build a future where people live in harmony with nature.</q>
We hope they will succeed.</p>

Try It Yourself

Example 2

Use CSS to set the style of the <q> element:

<html>
<head>
<style>
q {
  color: gray;
  font-style: italic;
}
</style>
</head>
<body>
<p>The World Wildlife Fund's goal is:
<q>Build a future where people live in harmony with nature.</q>
We hope they will succeed.</p>
</body>
</html>

Try It Yourself

Attribute

Attribute Value Description
cite URL Specifies the source URL of the citation.

Global Attributes

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

Event Attributes

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

Default CSS Settings

Most browsers will use the following default values to display <q> Element:

q {
  display: inline;
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support