Blockquotes, pull quotes, and quotes
Smashing Magazine’s Block Quotes and Pull Quotes article is interesting, and something everyone should skim through, at least.
According to HTML specifications, there are three elements which are supposed to semantically mark up quotations, namely
<blockquote>
,<q>
and<cite>
. Although all intended to markup quotes, they should be used in different contexts. So when should you use what?
I’ve only seen <cite>
used fairly recently, while at work in Y!, which sadly doesn’t say a lot about myself and my friendship with various markup tags available. I’ve been using it a bit more since. The best thing I’ve learned from the article, however, is this:
Although
<q>
is almost never used, it has some useful properties. For instance, you can specify the appearance of quotes within the<q>
-element via CSS. That’s reasonable as different languages use different quotation marks for the same purpose. For instance, these ones:Q {} Q { quotes: '»' '«' } Q { quotes: '„' '“' }
Modern browsers support this way of styling. Of course, Internet Explorer (even in its 8th version) doesn’t support it although it knows
<q>
pretty well…
The article also shows a few bad and good practices for usage of block and pull quotes. I’ll admit I’ve fallen victim to a few of those questionable practices, but it’s never too late to improve things. ;)