Inline quotes

When writing articles and blog posts we often quote comments made by others from other sources and display them with the blockquote element. But you can also display these quotes inline using the q element.

The q element is not new to HTML5 nor has its meaning been changed. However it is still a worthy element and we should know how to use it.

Last week I wrote about the a element, which turned out to be more powerful than one might have thought, not so with the q element which is actually quite basic.

To quote the W3C HTML5 specification:

The q element represents some phrasing content quoted from another source.

A blockquote element is used to display that quote right here in this article as it is not inline. But if I wanted to quote the same piece of text within this paragraph I would use the q element: The q element represents some phrasing content quoted from another source.

<q>The q element represents some phrasing content quoted from another source.</q>

Note that the text itself doesn’t (and shouldn’t) contain any quotation marks as these are automatically added by the browser. The type of quotations that are used can be controlled via CSS and the quotes property:

q { quotes: "“" "”" "‘" "’"; }

You can also include the source of the quotation by enclosing it in a cite attribute. The contents of the cite attribute must be a valid URL.

<q cite='http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-q-element'>The q element represents some phrasing content quoted from another source.</q>

It is also possible and valid to nest q elements within each other:

<p>In his article, Ian Devlin writes <q cite='https://iandevlin.com/blog/2013/03/html5/inline-quotes'>To quote the W3C HTML5  specification: <q cite='http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-q-element'>The q element represents some phrasing content quoted from another source.</q></q></p>

Of course you don’t have to use the q element for inline quotations at all; it’s perfectly acceptable to simply enclose the required quote in quotation marks.