Step aside

You can use the aside element for any section of content on your page that is “tangentially related” to the content around it. If you’re not sure if a chunk of content is tangentially related or not, it helps to think in terms of printed materials. An advertisement or a New Yorker cartoon would be considered asides. A parenthetical like a spec sheet in a car magazine review would not be considered an aside because the information is related to the other content in the review.

Here’s what the HTML5 spec has to say about the aside element and the distinction between tangentially related content and main content:

“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.

It’s not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.”

Source: The aside element, HTML5 Edition for Web Developers (WHATWG)

Fairly straightforward except for the pull quote example. The spec says the pull quote qualifies for the aside treatment, yet aren’t pull quotes by definition a part of the main content of the page?

The third paragraph of the spec above hints at an answer. It talks about the main flow of the document. A parenthetical is part of the main flow but a pull quote is not. What’s the difference between the two? A pull quote repeats a bit of the main flow, so removing it (by a user agent, for example) would have no effect on the main flow of the document. Removing parenthetical information, however, subtracts information and would change the main flow of the document.

So I like the following test to determine if a chunk of content qualifies for the aside element: Can the chunk be removed by a user agent and not affect the main flow of my document? If yes, it qualifies for the aside element. If no, it doesn’t.