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
qelement 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='http://www.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.
6 Responses
Well, there are potentially a few interesting little wrinkles pertaining to the use of the
qtag. One is that if CSS is for some reason turned *off*, all such inline quotes will be presented to the reader *without* any quote marks whatsoever, and thus in no way distinguished as different from the rest of the ordinary text of the page. Another is that–at least in some older browsers (Firefox 3.6 springs to mind)–such quote marks are *not* included in the result of a simple on-screen select-copy-paste. Problematic, to say the least!So. As we appreciate and value the additional semantic gloss which the
qtags provide, undesirable side effects such as those leave us with a problem. What to do?I forget where originally I got the following idea, but there is a somewhat clever, albeit slightly awkward, “have your cake and eat it too” solution. Namely, go ahead and use the inline-quote tags, but turn them *off* in your CSS by defining them as the empty string (“”–imagine those are two “straight” double quote marks), and then use character entities for the necessary quotation marks *within* the
q-delimited text. E.g.,... he said, <q>“Like so.”</q><aside></aside>As I see no comment preview button hereabouts, and just in case that gets mangled, here it is again with a few alternate characters you’ll easily figure out:(code)… he said, (q)+ldquo;Like so.+rdquo;(/q)(/code)
Overkill or clever work-around? You decide. But, whatever you choose, as in all such things, don’t forget to test your assumptions! CSS off? Copy-Paste? Does it still work? Does it really even *matter?*
I think a lot of folks just don’t bother with
qtags because it’s one of those “simple” little things that IRL just ain’t.P.S. After battling with your blog’s text entry mechanism, I appreciate it may not be possible (!), but you might want to attempt to change your leading
<blockquote></blockquote>decoration character from a”to a“. Good luck!The
blockquoteon this site uses a:beforepseudo class whosecontentis set to'open-quote'which doesn’t need to be changed.As for your other comments on on using the
qelement, you have some good points there but the solution you offer goes against what the specification says which does actually say not to add quotes yourself within theqelement’s content. Yes this might not work for those who have CSS turned off, but as with supporting browsers such as IE6, you have to make the decision on what you’re going to support.JFYI, Every April 10th is the annual “CSS Naked Day,” where folks the world over are invited to voluntarily unplug all of the CSS on their sites as a way of showing off their beautiful
<body>s, as it were. You know–the rightousness of their basic markup. (See, e.g., http://naked.threepixeldrift.com/ for mor info.) It’s a silly but also decidely fun way of showing support for web standards. I hear there’s even a WordPress plug-in available to use for that very purpose. And I for one think it’ll be interesting to see how folks deal with this very issue. (* raises a glass in a gesture of cameraderie *) “Cheers–Here’s looking at you!”If the specs recommend something that causes problems, then it’s time to take another look at the spec. It’s adding quote marks (which I would consider content) via CSS (which, despite all the recent blurring, still remains principally a style language). This smells very wrong, really, and may encourage some of us to forget the q element entirely and let content quotes determine that the content within is, obviously-to-all, a quoted string. Actually, this is what I’ve been doing since long ago, pretty much for the reasons listed above. It was easier than the pile of hacking we did back in the day to work cross-browser too. (these hacks: http://gtwebdev.com/workshop/misc/quotes.php )
Honestly, I can say as a developer that I would not want the meaning of my text to change dramatically when CSS is not present. Blockquotes might survive with meaning intact, but inline q elements can easily change entire meanings when they’re not obvious.
It’s true though for the copy-pasta case that most semantics are lost, really: headings stop being headings, links stop being links. I think it should be possible, if there are good use cases, for the vendors to consider adding some CSS-generated-content to be captured in text selection. I’d say this one is a little out of our hands, or we avoid using q.
Also, cite: is the the most useless, second most useless, or third most useless attribute ever? I can’t decide. The only way that information becomes available to users, that I know of, is to View Source. Or does everyone else just consider it meta-data for website scrapers?
Just to point out, you can control what quotes appear for the
qelement via CSS but once CSS is turned off, the browser uses a default set.So when I disable CSS on this page on Firefox 19.0, the browser defaults to using double quotes for the
qelement.