Inline quotations: use q elements or not?

In an A List Apart article titled Long Live the Q Tag [sic], Stacey Cordoni suggests a solution that will enable Web authors to use the q element for marking up inline quotations and get quotation marks around the quoted text in Internet Explorer.

The recommendation is to mark up inline quotations with the q element (HTML tags vs. elements vs. attributes), manually add quotation marks outside the q element, and use CSS to hide the quotation marks compliant browsers automatically render at the beginning and end of q elements.

There is a lot of discussion back and forth on this subject, and, well, I have to admit that I’m not quite sure which is best here. Arguments for not using the q element at all as well as arguments for using it seem valid. My own use of the q element has also swayed a bit back and forth through the years, as well as what I have been recommending to others.

I do know that I would not use or recommend the method suggested in the article. Out of the available options, it actually seems like the worst choice.

If/when I were to use q elements instead of manually entering quotation marks, I would much prefer using the JavaScript technique described by Gez Lemon in Fixing Quotes in Internet Explorer. I would use conditional comments to make sure that only IE 7 and below run the script, just in case Microsoft get around to implementing full support for HTML in a future release. Yes, it relies on JavaScript, but at least it preserves the semantics of the markup and doesn’t punish users of modern browsers with CSS turned off.

Posted on October 3, 2006 in Accessibility, Quicklinks, Web Standards

Comments

  1. I share the same feelings with you after reading this article last week. It just does not seem like the BEST option to get the job done. Yes, it would work - but it seems like a convoluted way to get the job done.

    Personally, I have never really used the q tag for support reasons - though it has great semantic meaning for the markup. It just makes me wonder, why is this little tag not supported (IE - displayed properly) in some browsers? (I know that may seem like a dumb question - but this isn’t like agreeing on CSS and it’s renderings - its just a tag).

    The meaning it brings to content makes me want to use it - but I want to use it in a way that the meaning and context is shared across all browsers. It is important for this to be displayed properly to really bring context.

  2. I read the article this morning and while it’s an interesting solution it struck me as something that’s just waiting to smack me in the back of the head in a few years if I were to use it. True, it gets the q tag in there but it disables any rendering of it so what’s the point? (I know that some screen-readers or something may benefit). It seems like a good way to make almost everyone suffer when they don’t need to. I think that if you’re going to use the solution presented in the article you might as well just use the ‘tags’ provided by the alphabet - quotation marks - and save the couple of bits of bandwidth.

  3. It’s worth noting that it’s not just a case of ‘browser X displays quotes’ and ‘browser y doesn’t display quotes’ - the browsers are also supposed to display language-specific quotes, so if the has a lang attribute of ‘fr’ or something, it should display the appropriate quote marks (chevrons in this case, I think, or something like that). Only IE5 on the Mac does…

    Then there’s also the nesting of quote marks - open with a double, then a nested quote should use a single, and vice versa. I don’t believe any browser does that correctly.

    I don’t see any real gain from using the quote tag. Yes, you can fanny about with Javascript to insert the quotes, but is it really worth the effort, and the lack of support for non-script browsers? Does any screen reader or search engine take note of the presence of the quote tag?

  4. Er, there was meant to be a q tag in my comment there with less-than/greater-than entites, but the comment preview turned it into a real one.

  5. I’ve never used the <q> element yet, probably because I’m lazy and I prefer to write quote characters directly. I just recently learned that it doesn’t work in IE. But most of all I’m not completly convinced of its usefullness in many circumstances.

    Most semantics in text is carried out by words and punctuation. We don’t need markup around each sentense, or clause in a sentense: the punctuation does the job. In most cases, quotes aren’t that ambiguous in text. That’s unless you’re using ‘single quotes’ which can easily be mistaken for apostrophes. In that case, <q> can be very useful. But when writing French for instance, « guillemets » are totally unambigious, even for a screen reader.

  6. Several members of The Multipack have shared your sentiments here over the last few days.

  7. I’ve only really used it once and it was to quote a phrase and it was rather irrelevant whether it needed quote marks.

  8. I think the problem is its stupid design. It moves punctuation (an integral part of the content) to some mysterious ethereal realm between content, presentation and behaviour which can only be altered through client-side scripting and stylesheets.

    Punctuation must surely be placed in the markup because it is essential to the content?

    However, you can only do this and avoid double punctuation by using CSS to undo the generated punctuation in compliant browsers. However, standards-compliant text browsers (notably Lynx) also render quote marks around elements and you can’t alter these because text browsers don’t have the presentational layer.

    It’s like requiring everyone remove the full stop at the end of their paragraphs and require UAs to generate this, only allowing it to be altered from a full stop (the default) to a question mark via a class in the start tag or a sophisticated selector.

    The problems are more because the element is badly designed than anything else, imho.

    (Having to re-encode escaped HTML angle brackets every time I preview is a bit boring.)

  9. I think the problem <q> is its stupid design. It moves punctuation (an integral part of the content) to some mysterious ethereal realm between content, presentation and behaviour which can only be altered through client-side scripting and stylesheets.

    Punctuation must surely be placed in the markup because it is essential to the content?

    However, you can only do this and avoid double punctuation by using CSS to undo the generated punctuation in compliant browsers. However, standards-compliant text browsers (notably Lynx) also render quote marks around <q> elements and you can’t alter these because text browsers don’t have the presentational layer.

    It’s like requiring everyone remove the full stop at the end of their paragraphs and require UAs to generate this, only allowing it to be altered from a full stop (the default) to a question mark via a class in the start tag or a sophisticated selector.

    The problems are more because the element is badly designed than anything else, imho.

    (Having to re-post this because of the entity escape bug. For a blog which talks about markup so much this a bit desperate, since commenters will want to talk about it as well!)

  10. If I had the choice (and on my personal site I do), I’d simply use the “q” tag as intended and let the browsers figure it out. Not my problem if you can’t render the tag according to spec.

    But if I didn’t have the choice (client work), then I’d use an unobtrusive JavaScript fix that would only target IE.

  11. What’s with calling it the q tag? I could have sworn it was an inline element made up of an opening tag, content, and a closing tag.

    I noticed that Anne also mentioned that he “appreciated ALA for using ‘tag’ in the article name”.

    I didn’t realize that it was a debate at all. Seems pretty clear-cut to me.

  12. October 4, 2006 by Bryan Sullivan

    I very rarely use the “q tag” or “blockquote tag” (Thomas, please give the rest of us a break for wanting to shorten the time it takes to describe simple HTML elements). I reserve those for when I want to imply that I’m quoting someone else, like in a bibliography. Otherwise, I consider both the double and single quote characters to be punctuation and forego using special markup. But to each his or her own.

  13. I have no problem with the word “tag” being used incorrectly in casual conversation (such as these comments) — I even slip up myself sometimes. But when it’s blatantly used in an ALA article, I find it a little hard to overlook.

  14. One thing I’m surprised no one has mentioned is that the reason for the q element’s existence is the cite attribute. A quote is more semantic than just a span because HTML was designed for scholarly documents, and the intention was to link these with quotations with the original document through URI.

    I use q for that reason: when I quote something, I use javascript to display a link to the quote in context (this is the true lack of implementation in all browsers—there is no ui for cite even if the CSS engine supports generated content.

    Semantically, Web 2.x applications could inform search results based on who is citing whom; it’s a common technique in academia that would be helpful to more broadly apply.

    I dislike the solution because I am a firm believer that if a user cares enough about their browsing experience to surf with javascript off, they will more likely have downloaded Firefox et al. The IE fix/hack is for everyday users, and suits the bill well.

  15. October 4, 2006 by Tommy Olsson

    There’s a serious drawback with the ALA solution: it punishes browsers that are standards compliant, yet doesn’t support CSS.

    For instance, Lynx would show two sets of quotation marks.

    I prefer a JavaScript solution for IE (using conditional comments). I could also consider some IE-only CSS to differentiate quotes from surrounding text for those IE users who have disabled JScript.

  16. There’s a similar problem with the li element and list-style-type css in XHTML. The number is part of the meaning or content yet is lost to browsers or user agents that don’t support CSS. In this case, I consider the number to be part of the MEANING of the list, so it should be in the markup, therefore I have to use list-style-type:none and include the 1. a) i) or whatever in the actual li element itself.

    Also, surely if you want to meet WCAG 1.0 at AA, you must include the q element for inline quotations otherwise you’re failing checkpoint 3.7 (whether this makes any difference to the actual ACCESSIBILITY of your site is open to debate).

    …so you just have to pick the method for quotation marks that you like the best. I like the ALA method because despite the fact I don’t think it’s semantically pure I think it’s the method that will fix things for the greatest proportion of people.

    Of course, when q is properly supported in IE and everyone’s upgraded, we can all just chill out…

  17. If I ever see the need for adding something in my source-code for IE, then I may as well make sure only IE sees it.

    Something like…
    <!--[if IE]>"<![endif]-->
    …will work just fine without having to degrade anything in good browsers. Can also be added through javascript, and versioned to taste.

  18. After reading the linked sources in these comments and re-reading some of my bookmarks about using <q> I - Still - do not understand why or why not I should use it. If I did use this element - Semantics aside - I would use Gez’s method.

    ALA doesn’t use <q> on its “Articles” index page. (They use &#8220; and &#8221;.) I don’t remember any authors excepting Stacey Cordoni using q elements in their articles.

    So, if ALA doesn’t use them, Why should we use q elements?

  19. October 4, 2006 by Roger Johansson (Author comment)

    paul, Ben: Yes, my comment preview is broken and I don’t know how to fix it. I think it’s time I wrote a full post about that to let everybody know :-).

    Ben: I agree that quote marks should be part of the content. However, like Ryan points out, the q element can also take a cite attribute that lets you include a URL to the source of the quotation.

    Thomas: I don’t understand why a publication like A List Apart would call an element a “tag” either. I was very surprised to see the title of the article and the consistent use of “tag” instead of “element”. And I am pretty sure that Anne was being ironic ;-).

    Tommy: Yes, that’s pretty much what I wrote here :-).

    JackP: I’m not quite sure what you mean. Are you saying there are browsers that do not render numbers for each list item in an ordered list?

    Georg: Well if you use a script you could use conditional comments to load it just for IE - no need to hide the quotation marks with conditional comments in that case.

    Sean: Pros: It gives quotations semantic meaning and lets you provide a URL to the source. Cons: Requires that all browsers support it fully or quotation marks will not be rendered properly or at all, quotation marks are punctuation and part of the content.

  20. I think what JackP refers to is the type, start, and value attributes which were deprecated in HTML 4. And I tend to agree with him: sometime (most oth the time?), the form of the list marker is important to the meaning; often in the text you refer to a list item using a, b, c, or i, ii, iii, iv. If you rely on stylesheets to give the proper marker format to an ordered list, non-CSS browsers aren’t going to be served well.

  21. How many actually disable JavaScript? I wouldn’t think twice about using JavaScript solutions for anything where the fallback renders reasonably well. Do a style definition if you have to, but people that disable browser features should expect a less than perfect experience.

  22. October 5, 2006 by Roger Johansson (Author comment)

    Michel: Ah, right, that’s probably what he means. I tend to agree with that as well. Moving the type attribute to CSS I can understand, but the other two seem too closely related to the content to be separated.

    Henrik: Between 5 and 10 percent of Web users, depending on which source you check. It’s important to remember that there are people who haven’t actively disabled JavaScript - for instance they could be behind a firewall or proxy that disables or filters JavaScript. Others may disable JavaScript for security reasons or to reduce bandwidth (I disable JS in my mobile browser to speed up browsing and make it easier).

    There is no problem with using JavaScript as long as the fallback is reasonable, i.e. the script is implemented as a progressive enhancement.

  23. October 6, 2006 by Isaac Lin

    I was originally with you, Roger, in thinking that I would rather use a Javascript solution to make IE follow standards. But after reading your summary of pros and cons, I’m starting to think that perhaps the ALA solution is the best way to pick up the pros of both approaches — you can identify the source of a quotation, and you can still have the punctuation in the content, using the appropriate symbols for nested quotes and adapting to the language of the text (there is no need for the browser to do the adaptation; authors have the responsibility of knowing the customary conventions in the languages they are writing in).

  24. Yeah, authors are responsible for their punctuation everywhere else.

    I think list markers are a slightly different situation but Jack explains it well. For ordered lists where the content refers to the items by their marker, as often happens in legal documents, those markers should be part of the content.

    @Roger, Ryan: I agree that q is a useful element in theory, especially because of the cite attribute.

    I only meant to criticise it disallowing quote punctuation in the content. I think this makes it an undesirable element in practise because you have to disobey the spec and hack against current, standards-compliant browsers to put your punctuation where it should logically be.

    Of course, if everyone agrees to hack around q in the same way then maybe it’s not so bad. It would be like a Microformat. :P

    Although even then you’d still have problems with text browsers who generate punctuation for q

  25. @Michael, Roger, Ben: yeah, that’s exactly what I mean.

    In addition to the fact that non-CSS browsers don’t get your style, there’s no way to excerpt a larger numbered list and run from 19-25, for example - unless you set it up without a blank list-style-type and put the number in the content (and frankly, as it is part of the meaning, it should be in the content anyway).

    But that’s all very off-topic as far as the q element goes, so I’ll shut up now…

  26. October 28, 2006 by anonymous coward

    It’s too bad that HTML isn’t fully supported in IE7 either … they only had 5 years to put it in.

  27. It looks like MS has no intention of getting proper tag support any time soon. Fortunately, they gave us behaviors so, at least we have the ability to fix the browser. Unfortunately, everybody has to fix it :-P At any rate, I’ve posted a behavior to deal with this particular issue: http://willcode4beer.com/tips.jsp?set=fixIEQuotes

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.