Please note aside has been redefined since this post was written, please read the updated article.

HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it. However, in the interpretation of <aside> there lies confusion as to how it can be used, and with that there is demand for the Doctor to step up and clear the air. In this article I will look at what <aside> was created for, including sample uses and how not to use this useful, misunderstood element.

First, a look at how the HTML 5 specification defines <aside>:

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.

What can often trip-up someone reading the specification is the use of the word “sidebar”. I will go into detail about this later in the article, for now you should be aware that what is said there might not quite mean what you first think. Content within an <aside> should be stand-alone information that is related to the article in context. If your <aside> content meets this requirement, then you have a useful element to not only semantically wrap that content but to even hook CSS styles on.

How strict should this relationship be? Very. Good <aside> content examples include pull-quotes, a glossary or even related links.

Example Uses

As suggested in the specification, a pull-quote is an excellent example of a piece of content that is separate from the main article body but still related. Points of interest highlighted.

<article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at 
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed 
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed 
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna 
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt 
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet 
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat 
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam 
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

For more about the <header> element see Richard’s article, “The <header> Element.

On a styled web page or, more common, in a printed article this would be represented visually as a highlighted quote to the side of the main article. This <aside> is related to the content but does not need to be part of the article body as it can be understood without the extra information, or in this case without the duplicate quote.

Another example would be a glossary of terminologies used in an article:

<article>
    <header>
        <h1>Web Technologies</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit, 
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum 
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus 
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel 
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>A set of standards for styling documents presented on the 
            World Wide Web.</dd>
            <dt>PHP</dt>
            <dd>A server-side scripting language suited to dynamic HTML document 
            generation for the web.</dd>
            <dt>JavaScript</dt>
            <dd>A client-side scripting language used for manipulating HTML documents 
            within a browser.</dd>
        </dl>
    </aside>
</article>

Incorrect use of <aside>

It is easy to confuse this element for something it isn’t, and as mentioned earlier the definition of <aside> can trip-up a few developers. The most common misconception of how this element should be used is for the standard sidebar. While there is usually a degree of relation between sidebar content and the content in an article, it is not enough to be considered fit for an <aside>. 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>.

In the definition of <aside> it is key to note that it refers to sidebars in printed media, such as a magazine or leaflet. A “sidebar” in a magazine might contain additional notes on the article in context, translating this to HTML 5 would consider this an <aside>. If the printed article on PHP had an ad for “Superior, Cheap, Web Hosting” as a sidebar, this would not be classified as an <aside>. In such cases, look at other elements for more semantic mark-up.

Closing Thoughts

Like any HTML element, when used correctly the <aside> element can be very useful in semantically marking-up page content. An <aside> can be used to enhance an article with additional information, or highlighting parts that the reader may find interesting. Asides are stand-alone, non-essential as part of an article but when used correctly it can be an extra level of information for your content. Don’t try to force content into an <aside>, if it’s not tangentially related to the article then it shouldn’t be there. HTML 5 offers many new elements to mark-up your web pages, use them wisely.