Question

I got really excited when I read this on Mozilla Publisher Network:

In HTML4, every section is part of the document outline. But documents
are often not that linear. A document can have special sections
containing information that is not part of, though it is related to,
the main flow, like an advertisement block or an explanation box.
HTML5 introduces the <aside> element allowing such sections to not be
part of the main outline.

I felt equally trumped when I came across this on HTML5 Doctor:

Navigation, ads, search boxes, blogrolls and so on are not directly
related to the article and therefore do not justify the use of an
<aside>.

As such, after quite a bit of Googling, I realized that people have mixed opinions. Some agree with the use of <aside> for content like ads, but others don’t.

Core Problem: I am building a technology blog, and ever since the beginning, I wanted the pages (including the articles) to be full-width. This gives me little chance to place an ad in it (Google really doesn’t like “ads” in between an article’s content).

And when I came across the <aside> element I thought I struck a gold mine until I saw the mixed opinions about its use for advertisements.

So, the question is, can someone knowledgeable shed some light on whether it is okay to use <aside> for advertisements? Also, are there any semantic alternatives (element or markup)?

Answer 1

Here’s what the spec 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.

Leaving aside the fact that advertising is specifically mentioned as being OK in the second paragraph, the source of the confusion is clear. The two paragraphs are slightly contradictory.

The first paragraph states that it should be used for content tangentially related to and considered separate from the main content.

The second paragraph only requires that the content be considered separate from the main content.

I suspect this confusion has come about through the choice of the “aside” name which has “tangentially related to” connotations in English, whereas the alternative rejected name for the element, which was “sidebar” does not.

I’m not wholly sure why “sidebar” was rejected, but possibly it was considered too presentational and insufficiently semantic. Unfortunately in selecting “aside” instead, the author introduced semantics that weren’t really intended and aren’t helpful.

Fortunately, we don’t in this case need to decipher this contradiction. Advertisements are specifically called out as being suitable for <aside> so the issue is clearly resolved.