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 "Best Web Page Ever!" in a blockquote seems like overkill when it can sit inline 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 is rendered 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. 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 Web site.)
If you're going to add the quotes into your code, 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 do generated content. But since it also doesn't add the quote marks, we don't care if it ignores it.
Then, add the quotation marks to your HTML. I used angle quotes rather than curly quotes to show it more clearly:
<p>Mark said, «<q>Yeargh! It's ‹<q>Talk-Like-a-Pirate Day.</q>› Ahoy, Maytey!</q>».</p>
Mark said, «Yeargh! It's ‹Talk-Like-a-Pirate Day.› Ahoy, Maytey!».
