Choosing the right element for your markup is not a life-and-death situation. Nonetheless, I think HTML becomes easier to maintain and easier to read when content is marked up in a more meaningful manner, in line with the new developments in HTML5.
HTML5 has, as most of us know, introduced a new
<aside> element, which I feel can replace the
<blockquote> element in specific places where we would normally think a
<blockquote> is more appropriate.
Rethinking Markup for Pull Quotes
Pull quotes have been used in print design for as long as many of us can remember. I’m sure they go back long before I was ever born. And online they have become a staple for many sites.
One site that comes to mind in the web dev niche, that uses pull quotes, is Nettuts+. Here’s a recent article that shows how they use pull quotes in their articles and tutorials. I’ve screen-grabbed their pull quote with the HTML visible in Chrome’s developer tools:
In the example above, and in many other cases, this is the kind of ‘quote’ that would be more semantically correct if placed inside of the
<aside> element. To confirm this, let’s compare what the spec says about
<aside> as well as what it says about
<blockquote>, the spec says:
The blockquote element represents a section that is quoted from another source.
<aside> it says:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Notice two key points here: First, the
<blockquote> element is not meant to be used for material quoting the same source where the
<blockquote> is found (as is the case on Nettuts+). This seems to be changed from how it was defined in HTML4. Second, the definition for the
<aside> element specifically says that it could be used for pull quotes, and that its content is “considered separate” from the primary content.
You Know You’re Using it Wrong If…
So to summarize why
<aside> (and not
<blockquote>) should be used for pull quotes, here’s how you can determine if you’re using these elements incorrectly:
- If you can remove an
<aside>from the page, and the content to which it’s tangential becomes incomplete, then you should not be using
- If you can remove a
<blockquote>from the page, and the content around it is complete even without it, then you should not be using
So only use
<blockquote> to quote external sources that are part of the primary content, not for ‘side’ content that’s decorative or is repeated in the primary content. The two quotes in this very article are legitimate
<blockquote> content because without them the content would be incomplete.
If Nettuts+ were to change their markup to HTML5 (they’re currently using XHTML strict), then some of their blockquotes would now be inconsistent with the spec. Which raises the question: Doesn’t this go against the principle of HTML5 being backwards compatible with existing content? I’m really not sure, but this does seem to make many older pages somewhat obsolete if only in a trivial way.