A List Apart

Menu

Long Live the Q Tag

Issue № 224

Long Live the Q Tag

by Published in HTML · 107 Comments

The Q tag has been around for nearly nine years, ever since the first version of HTML 4.0. Its purpose is to handle short, inline quotations that don’t require paragraph breaks.  The Q tag is commonly associated with the blockquote tag, which is used for long, block-level quotations.  Since the Q tag’s inception, it has never been fully compatible with Microsoft Internet Explorer for Windows.

Article Continues Below

Quotation marks are supposed to render with use of the Q tag but not with use of the blockquote tag (it’s not necessary since the blockquote tag separates its enclosed content from its surrounding content).  However, IE/Win does not render these quotation marks, and because of this, most web authors choose not to use the Q tag.  I’m here to change all that!

I’m sure we all know the difficulties in creating a web site that has valid CSS and XHTML, is fully accessible and usable, is consistent in its visual display and is in accordance with the W3C HTML 4.01 Specification, along with everything else.  With this particular fix, the W3C HTML 4.01 Specification is jeopardized ever so slightly; accessiblity and consistent visual display rank higher on my priority list than perfect compliance with the W3C HTML 4.01 Specification. I’ll recommend some alternate solutions at the end of this article for those with different priorities.

The Q tag problem

Example: Did you know The quick brown fox jumps over the lazy dog contains every letter of the alphabet?

In the above example, you should see quotation marks around “The quick brown fox jumps over the lazy dog.”  If you don’t, you’re using IE/Win, am I right? No, I’m not psychic (I wish!)—IE/Win does not render the quotation marks that are supposed to be rendered with use of the Q tag.

For those of us Browsing Happy, or even browsing with Lynx (a text-only browser), we see the quotation marks (straight quotation marks in Lynx).  The problem lies with only IE/Win.  Let us see what IE/Win sees:

Example: Did you know The quick brown fox jumps over the lazy dog contains every letter of the alphabet?

It’s grammatically incorrect gibberish, and there is no visual indication of a quotation even though the Q tag is being used.  Preposterous! I will fix this.

Because of IE/Win’s lack of support for the Q tag, the Q tag is not used by many web designers or web authors.  This may be because there has been no solid solution to rectify IE/Win’s faulty support for the tag. Most of the articles I have read on the Q tag (Simon Willison’sFixing quotes with Javascript”, Mark Pilgrim’sThe Q tag” and “The Q tag revisited”, and Richard Rutter’sCitations and quotes”) rely on one or more of the following:

  • Using CSS to italicize the Q tag in IE/Win.
  • Using JavaScript to render the quotation marks.
  • Ceasing to use the Q tag altogether.

Other fixes (not from the above articles) I have read about include:

  • Using the blockquote tag instead.
  • Using the Q tag, but also including your own quotation marks.

The trouble with these fixes

  1. Using CSS to italicize the Q tag in IE/Win.
    • This could cause confusion: I wouldn’t assume italicized text to be a quote unless I saw quotation marks around it.
  2. Using JavaScript to render the quotation marks.

    • Many people disable JavaScript, so the people using IE/Win with JavaScript disabled still won’t see the quotation marks.
    • Double quotation marks will appear if and when IE/Win fixes the problem in a future release.
  3. Ceasing to use the Q tag altogether.

    • Why? The Q tag is neccessary for semantic markup and for screen readers.
  4. Using the blockquote tag instead.

    • Using an incorrect tag is not the solution.
  5. Using the Q tag, but also including your own quotation marks.

    • This will result in double quotation marks in browsers other than IE/Win.

Then what is the solution?

I’m stubborn, so I didn’t want to use any of the above fixes—I wanted to use the Q tag and have it work for everyone, even in the future when IE/Win supports the tag.

After much thought, I realized I should try to alter the other browsers instead of IE/Win. That is when I came up with the following CSS code.

q:before, q:after {
    content: ""; }

IE/Win does not recognize :before and :after pseudo-elements, but it is not neccessary for IE/Win to recognize them for this fix.

As you can see in the CSS code, the content property is blank.  This overrides the browser’s default style for the Q tag and replaces it so that no quotation marks are shown.  All browsers will now act like IE/Win does when it comes across the Q tag.

Simply add the above CSS code to your stylesheet and add quotation entities outside the Q tag and now all the browsers, including IE/Win, will display quotation marks—and we won’t have to worry about the other browsers having double quotation marks because we overrode the Q style with our own.  It may be annoying to have to add the quotation entities, but it’s worth it to your IE/Win users.

Quotation entities:

Left double quotation mark (eg. “):
Right double quotation mark (eg. ”):
left single quotation mark (eg. ‘):
Right single quotation mark (eg. ’):
Straight quotation mark (eg. “): "

Example code:

Did you know “The quick brown fox jumps over the lazy dog” contains every letter of the alphabet?

Returns:

Did you know “The quick brown fox jumps over the lazy dog” contains every letter of the alphabet?

What are the downsides?

According to the W3C HTML 4.01 Specification:

Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element.

As mentioned above, authors should not put quotation marks inside the Q tag. With this fix, I suggest the quotation mark entities be put on the outside of the Q tag, thus not disobeying the W3C HTML 4.01 Specification (the XHTML 1.0 specifications rely on HTML4.01 for the meanings of XHTML elements and attributes). If you need to use a quote inside a quote, you’ll have to place the single quotation mark entities inside the Q tag, which is not in accordance with the W3C HTML 4.01 Specification.

Conclusion

Hooray! Now we have a way to use the Q tag to maintain semantic markup and accessibility and cater to IE/Win users. As far as future support for the Q tag goes, it’s not yet known if the developers of IE/Win will recognize and address the browser’s lack of support for the Q tag. As of IE/Win 7 Beta 3, the Q tag is still unsupported. To reinforce this, the Q tag is not even mentioned on IEBlog (other than in comments from users).

When the Q tag is finally supported by IE/Win, the above fix won’t damage the experience of users with new browsers, and it’ll still fix the problem for users of older, broken versions of IE/Win. So there you have it folks, a backward- and forward-compatible fix for the Q tag. Enjoy!

Addendum: alternate solutions

The Q has been written about by many and here are a few more solutions you may want to try:

I would recommend Simon Willison’s “Fixing quotes with Javascript” as the second-best solution to the Q tag.  Currently it works fine, though it obviously relies on JavaScript. Also, this fix isn’t forward compatible: once IE/Win supports the Q tag, Simon Willison’s fix will cause double quotation marks for users with the new version of IE/Win.

About the Author

107 Reader Comments

Load Comments