HTML5 <q> Tag

The HTML <q> tag is used to indicate that the enclosed text is a short inline quotation. This element is intended for short quotations that don’t require paragraph breaks; for long quotations use the <blockquote> element.

The only content permitted inside this element is phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <q> tag can be any element that accepts phrasing content.

Most modern browsers will automatically add quotation marks around text inside a <q> element. A style rule may be needed to add quotation marks in older browsers.

The following style is applied to this element by default:

q {
  display: inline;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

Here are some examples of using this tag:

<p>The man said 
  <q>Things that are impossible just take longer</q>.
  I disagreed with him.</p>

<!-- Nested 'q' Tags -->
<p>In <cite>Example One</cite>, he writes 
  <q>The man said 
    <q>Things that are impossible just take longer</q>.
    I disagreed with him</q>.
  Well, I disagree even more!</p>

Examples

See the Pen HTML q Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <q> element on MDN.
  2. You can also read the HTML <q> tag reference on W3C.

Attributes

cite

The value of this attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top