For years we’ve been abusing the poor <blockquote> tag. And I’ve been as guilty as anyone. Most of the time, we use it as a pull-quote. Those big excerpts of text from within the current article we highlight to make a point stand out, or to add some visual interest to page.

The things is, that’s not what a <blockquote> is for.

Blockquotes are for actual quotes

Below is the current definition from the W3C’s current editor draft.

Source: W3C HTML5 Recommendation

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Content inside a blockquote other than citations and in-line changes must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

So, a <blockquote> should be content quoted from another source. Typically inline, like for a research paper, or an email thread. This means that using <blockquote> for a pull-quote is not appropriate. But don’t worry… <aside> to the rescue!

The HTML5 <aside> tag

The new HTML5 <aside> tag is for content tangentially related to the content around it. Here is the description from the W3C.

Source: W3C HTML5 Recommendation

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.

This means that the <aside> tag is perfect for things like pullquotes, or related content that might go in a sidebar.

The only complication you need to worry about the <aside> tag is context.

When an <aside> is used inside of an <article> tag, the <aside> should relate to the article.

When an <aside> is used outisde of an <article> tag, the <aside> should relate to the web site itself.

Examples in this article

In this article we have two instances of <blockquote>, one <aside>, and one <aside class="pullquote">.  The blockquotes are the excerpts from the W3C HTML5 definitions. The aside is the “How we use <aside> at Quinn Labs” box near the bottom of the page. And the aside styled as a pullquote is the box with the yellow rules above and below that reads “This means that using <blockquote> for a pull-quote is not appropriate. But don’t worry… <aside> to the rescue!”