The Standard Quotation
Whether you’re writing fiction or non-fiction, chances are you’ve needed to write a quotation on your web pages at one point or another. But putting a short quotation like “Eureka!” in a blockquote seems like overkill when it can sit right in the paragraph and not take up as much space.
That is what the <q> tag in HTML is for. It is an inline element that differentiates quotations from the surrounding text.
The HTML specification says that the user agent or web browser should enclose content inside the q tag in quotation marks, specficially:
Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks.
So, the following HTML:
<p>Mark said, <q>Yeargh! It’s <q>Talk-Like-a-Pirate Day.</q> Ahoy, Maytey!</q></p>
Should render something like this:
Mark said, “Yeargh! It’s “Talk-Like-a-Pirate Day.” Ahoy, Maytey!”
But if you’re using Internet Explorer, you’ll see that it looks more like this:
Mark said, Yeargh! It’s Talk-Like-a-Pirate Day. Ahoy, Maytey!
Differentiate Quotes with Style Sheets
It’s possible to differentiate the quotes using style sheets. The most common way is to set the quotation in italics:
q { font-style: italic; }
And then if you want most standards compliant browsers (that have the quote marks) to have normal text, use these selectors to hide it from IE 6 and lower:
p>q { font-style: normal; }
Of course, then you’re still left with IE 7 and higher. This browser understands the more advanced selectors, but doesn’t add quotation marks. Your first thought might be conditional comments, but Microsoft removed that functionality from IE 7, in favor of making the browser more compliant.
So How Do We Get Quote Marks in All Browsers?
Ironically, the best way, for now is to go back to basics. Just add the quotation mark to your content. This isn’t 100% valid, but until IE starts supporting the standard it’s the best we can do with both CSS and HTML. (Yes, it’s possible to force the quotes with JavaScript, but that’s another website).
If you’re going to add the quotes into your HTML, then you need to make sure that compliant browsers don’t display them. You do that with this CSS:
q:before, q:after { content: ""; }
Internet Explorer will ignore that style, because it doesn’t display generated content. But since it also doesn’t add the quote marks, we don’t care if it ignores the style removing them. This will only become a problem if IE starts supporting either generated content or adding quotes around Q tag contents, but not both.
Then, add the quotation marks to your HTML.
<p>
Mark said, “<q>Yeargh! It’s ‘<q>Talk-Like-a-Pirate Day.</q>’ Ahoy, Maytey!</q>”.
</p>
Would render like this:
Mark said, “Yeargh! It’s ‘Talk-Like-a-Pirate Day.’ Ahoy, Maytey!”.
See an example using the q tag.
Note About this Page
The About.com CMS does not allow me to use the Q tag, so when you look at the source HTML, all the examples above are written without defining the quotations. Please try the examples yourself, or view the Q example page for more semantic renderings.
