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 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:
qelement represents some phrasing content quoted from another source.
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 represents some phrasing content quoted from another source.
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:
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.
It is also possible and valid to nest
q elements within each other:
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.