HTML Tag of the Day: q

Today’s under-utilized HTML tag of the day is the <q> tag, intended for inline quotations. The <q> tag’s oft-used block-level analog is the <blockquote>.

Interestingly enough, the HTML 4.01 spec tells us that:

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.

I’ve marked up the passage above using <blockquote>s. Here’s how it looks marked up with <q> tags: 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.

If you’re looking at this post in a standards compliant browser, you’re probably seeing curly quotes around around the linked excerpt above. Unless of course you’re in France in which case you’re probably seeing angle quotation marks, aka les guillemets: « and ».

If we look at the default HTML stylesheet for Firefox (located here on Windows: C:\Program Files\Mozilla Firefox\res\html.css) we can see how Firefox adds locale-specific leading and trailing quotation marks.

q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

Sadly IE 6 does not follow this requirement, nor does it implement the :before and :after pseudo-classes or the content: selector. Which is probably why this exceedingly useful tag has not enjoyed widespread use.

This post first appeared on From the Belly of the Beasts, a weblog from some of the people who build O’Reilly websites.

1 Comment

Mark

It’s too bad. Using this with things like CSS2’s :lang psuedo-class would make publishing online for an international audience much more straightforward.

MSIE’s failure to support CSS2’s :first-letter pseudo-element as well as the :before psuedo-class has frustrated me in the past.

Care to Comment?

Or if you'd prefer to get in touch privately, please send me an email.

Name

Email (optional)

Blog (optional)