q HTML element
The q HTML element is used to represent an inline quote. Now regular quotes (“”) can represent this just fine, surrounding the quote in the q tag differs in that it explicitly indicates that the text is a quote, removing ambiguities that it could be emphasis, irony, etc.
In addition to explicitly stating that the text is a quote, it also provides a way to consistently style all quotes with minimal markup.
Usage
A quote
To use the q element, surround the quote with the tag. Ensure you do not add quotes in addition to the q tag or they will come through twice.
<p>Gandalf opened the doors to Moria by saying <q>Mellon</q>.</p>
A quote within a quote
It is also possible to specify a quote within a quote. The CSS quotes property let’s us define what the outer and inner quotes look like as explained in the styling section.
<p>She told me <q>Paul said this morning <q>don't take that one.</q></q></p>
Styling
This is the default CSS for the q element.
q {
display: inline;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
The pseudo-elements use the special values for content; open-quote and close-quote. These are used in conjunction with the quotes rule which can specify what quotes are used at varying levels of depth. This snippet will surround the first level of the q elements on a page with double quotes and the second level with single quotes.
body {
quotes: '"' '"' "'" "'";
}
Combined with the lang pseudo-class, it’s possible to use different quotes for different languages.
:lang(en) > q {
quotes: '"' '"' "'" "'";
}
:lang(ja) > q {
quotes: '「' '」' '『' '』'
}
:lang(fr) > q {
quotes: '«' '»' '“' '”';
}
More advanced styling is possible, unicode characters can be specified using the '\xxxx' syntax.
See the Pen The <q> element by Daniel Imms (@Tyriar) on CodePen
Further reading
Read more on the q element from the following sources:
