Understanding aside

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.

Share and Save:

57 Responses to “ Understanding aside ”

Comment by Jason Grant at June 29th, 2009 at 5:27 am

I have major issues with .

I predict that in practice it will be majorly: abused, underused and misused.

Comment by Rich Clark at June 29th, 2009 at 5:49 am

I understand your concern and thats exactly why we’re going to try and address that issue. There are issues with the perceived differences (or lack of) between figure and aside for example and our very own Bruce Lawson has written to the working group to get clarification, we’ll do our best to keep you updated with developments.

Comment by Stuart Charlton at June 29th, 2009 at 10:56 am

In your first example, what is added to the document by wrapping the h1 in a header element? And what is gained by using aside over blockquote for the pull-quote?

Comment by John Allsopp at June 29th, 2009 at 4:20 pm

I agree with Jason that this, along with other aspects of HTML5 will likely cause confusion, and attendant misuse. In english, an aside means things at odds with the definition in HTML5. And apart from Matt Mullenwegg’s asides in wordpress, I’ve rarely if ever seen it used in relation to publishing and document markup.

The idea is very sound, The implementation is problematic, sadly.

Comment by Scott Nellé at June 29th, 2009 at 7:45 pm

In your first example might not the duplication of the quote be confusing from an accessibility standpoint because it presents information out of context and breaks up the flow of information around it? I think this is probably most jarring for screen reader users. Are there any plans that you’re aware of to address context issues with the element?

Comment by John Faulds at June 30th, 2009 at 3:34 am

In such cases, look at other elements for more semantic mark-up.

Can you give some examples of elements in HTML5 that would be better suited to marking up sidebars (the common web type, not printed)?

Comment by Bruce Lawson at July 1st, 2009 at 4:14 pm

In the skeletal sample markup above, there is no advantage to wrapping the h1 – but as most sites have a tagline, some nav, a logo etc the header groups them more semantically than div id=”header”.

Sidebard are frequently used in print material as “related reading” or “if you liked this, you might like that” and I would mark those up with aside.

For pullquotes, you might also consider the figure element, and set the aural stylesheet for display:none (if any screenreader ever used an aural stylesheet, of course)

bruce

Comment by D Ross at July 2nd, 2009 at 1:53 pm

Ok..So don’t use aside for the sidebar. Then what to use? Should this not be clearly stated in the article?

Comment by D Ross at July 2nd, 2009 at 2:19 pm

Hmm…I’ve been researching and reading more about aside the last hour or two. It seems very awkward to wrap DLs/Qs etc in aside. A DL or Q already has enough semantic meaning on it’s own and, IMO, does not need to be double wrapped and double “semanticized” .

I see what they’re saying about the aside directly relating to the article or content but a sidebar does relate to the “content” of a website. It is secondary information for that page as a whole.

I’m about to start writing my first html5 site and am going to use aside for the main sidebar. If, after delving deeper, it turns out ugly or I find a better solution I’ll repost.

I could use “section” but if you use “section” for every area of the page then what’s the difference or benefit over div really? Not a whole lot.

aside sets secondary “page” information to the side. That’s what I’m going to use it for.

Comment by D Ross at July 2nd, 2009 at 7:02 pm

Yep, aside as the entire sidebar doesn’t work. At least not in my case where I have different sections within the single aside. Damnit. Guess I’ll use section!

Seems like there should be some sort of explicit tag to identify an entire sidebar as a sidebar and merely not just a section.

Comment by Scott Nellé at July 2nd, 2009 at 7:26 pm

I’ve been doing some cursory investigation into HTML 5, and from what I can tell section is a decent candidate for a main sidebar. However, as D Ross says above:

I could use “section” but if you use “section” for every area of the page then what’s the difference or benefit over div really? Not a whole lot.

I tend to agree with that. How about footer? You’re allowed several per page, and it’s meant to represent the footer in a semantic sense (so to speak) where we usually put info about the page, extra navigation, etc… To me, this serves essentially the same purpose as a traditional main sidebar. Therefore, I’d suggest the footer element for the main sidebar.

Comment by Mike Robinson at July 2nd, 2009 at 9:18 pm

@John Faulds & D Ross: It really depends on your sidebar’s content. For example, if your sidebar contained a list of categories that link to their archives, the nav element would be appropriate. If you feel the need for additional semantic grouping of these elements in your document, use div, article, header, footer or section as appropriate.

In regards to the question about use of section and div, this is something that could be covered here at HTML5Doctor as it appears to be a concern of many developers/designers.

Comment by Dari at July 3rd, 2009 at 1:50 pm

I think it’s much better explained in this document: http://dev.w3.org/html5/html4-differences/#new-elements
aside represents a piece of content that is only slightly related to the rest of the page.

Comment by Stephen Hay at July 3rd, 2009 at 10:14 pm

Ironically, what HTML5 calls asides are traditionally called sidebars (!) in magazine publishing. In LaTeX, I think marginpar comes pretty close. While I tend to agree with John about the confusion, I’m fairly convinced that , while inviting misuse, is better than “’sidebar”, considering the associations people have with sidebars on the Web.

However, I think examples like pullquotes invite misuse, and make aside seem too vague and broad. @Bruce: I find your suggestion to use figure for pullquotes interesting, but as pullquotes are a typographic element in their own right, I’m disappointed not to see a pullquote element (or or similar).

Comment by Ben at July 7th, 2009 at 1:59 pm

@D Ross

There’s an article on net.tutsplus.com that uses aside as a sidebar successfully. Although this may not be semantically correct, I would definitely like to see something that breaks up the “section” monotony

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Comment by Ben at July 7th, 2009 at 2:01 pm

Great article by the way! Very helpful information. Thanks for making things clear

Comment by DRoss at July 7th, 2009 at 4:34 pm

Nice article Ben. Didn’t think of using display: table /cell for those areas. Thanks.

Comment by griff at July 9th, 2009 at 1:31 pm

Would images with captions belong in asides? Related video and audio?

So:

A nice photo by Trollman on today

becomes

A nice photo by Trollman on today

(I realize that span is probably not what we want… but you get the idea)

Comment by griff at July 9th, 2009 at 1:31 pm

Hmm… so you don’t strip out markup. How can I do raw html text?

thanks,

-griff

Comment by griff at July 9th, 2009 at 1:36 pm

Ahh. Nevermind. That’s what figure is for (apparently). Sorry

Comment by Rich Clark at July 10th, 2009 at 9:53 am

Yes you’re right, that’s what you would use <figure> which is something we’re planning to cover in a future article.

Comment by David at July 14th, 2009 at 7:16 am

Are not sidebars secondary navigation of a Web site? So why not use another with an id attached to it for creating sidebars. Thoughts…

Comment by David at July 14th, 2009 at 7:19 am

(meant) So why not use another nav element with an id attached to it for creating sidebars

Comment by zcorpan at July 15th, 2009 at 8:30 am

<aside> was actually originally called <sidebar> in the spec, so at least it is intended to be used for sidebars in general. If reading the spec makes you think otherwise then that’s probably a problem with the spec’s definition of aside: please send feedback to the list!

Comment by Rich Clark at July 16th, 2009 at 4:55 pm

@zcorpan the definition given by aside is

consists of content that is tangentially related to the content around the aside element

this along with the examples given indicates aside should mainly be used within an article and not within a complete page structure. For example, would you use aside around the about section in this sites sidebar? That content is related to the site but not the content of the page. I would argue the same can be said for all sidebar components, if it’s the spec’s intention for it to be used as a sidebar it should be re-written to clear it up.

@David have you seen Tom’s nav article that might help you with that .

Comment by David at July 18th, 2009 at 4:45 pm

@Rich Yes, I did go through the article and now I have a clear perspective of the NAV element. So if not aside, What? Would this be a good alternative – <section id=”sidebar”>

Comment by Rich at July 19th, 2009 at 6:04 pm

@David, yes I think that’s probably the best way to go about it as of now.

Comment by Georgiy at July 24th, 2009 at 8:21 am

I think this article is a brilliant attempt to clarify the obscure specs, but however brilliant it failed. All this discussion about what is “tangential” is very interesting, but it’s in the clouds. In fact things are just easier, and that’s great because it will make “abuse, underuse and misuse” much more difficult.
Whatwg uses aside for sidebar for their recent demo: http://www.whatwg.org/demos/company-home/
Or do they misuse their own specification?

Comment by Precog at August 2nd, 2009 at 11:13 am

Let’s look at it from another perspective: content hierarchy, SEO and the Googlebot. From that perspective it is clear that content in should be more important than content in or . And content in should be more important than the content in .

I think the most important thing is to make a clear hierarchy in your webpages and the only thing to say about the semantics is: ‘it depends’. In many cases I think it is arguable to use for sidebars, comments or even advertising, for example Google Ads. As long as it’s related, but not the main content itself.

Comment by Precog at August 2nd, 2009 at 11:15 am

Let’s look at it from another perspective: content hierarchy, SEO and the Googlebot. From that perspective it is clear that content in [header] should be more important than content in [p] or [footer]. And content in [article] should be more important than the content in [aside].

I think the most important thing is to make a clear hierarchy in your webpages and the only thing to say about the semantics is: ‘it depends’. In many cases I think it is arguable to use [aside] for sidebars, comments or even advertising, for example Google Ads. As long as it’s related, but not the main content itself.

Comment by Mike Robinson at August 4th, 2009 at 12:15 am

@Georgiy: I’d say that the use of aside is incorrect in that demo, as well as a few other things. However, since it is one page it is hard to see the reasoning for using aside. From the naming it is clear it has been used for a sidebar, but the standard site sidebar is not usually an appropriate use for aside. This is not to say that all “sidebars” are not suited to aside, it is all about context. Which leads me to…

@Precog: Your statements about content hierarchy are perfectly reasonable, and I would say your comments on the use of aside is fair too. A number of things CAN be placed in aside, but they need to be related to the main content.

One key thing that the best minds of our industry have been pushing for years is for people to stop marking up content with presentation in mind, but instead to think of the semantic meaning. Aside does not equal sidebar, just like article does not mean the widest column of a 3 column layout. If people did this, they would find it easier to understand the spec and what advantages HTML 5 can bring them.

Comment by Designing A HTML 5 Layout From Scratch | How-To, Tutorials | Smashing Magazine at August 4th, 2009 at 9:06 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Coding A HTML 5 Layout From Scratch at August 4th, 2009 at 9:37 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Coding A HTML 5 Layout From Scratch « Tech7.Net at August 4th, 2009 at 10:58 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Wordpress Blog Services - Coding A HTML 5 Layout From Scratch at August 4th, 2009 at 2:22 pm

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by David at August 4th, 2009 at 7:03 pm

Quoting Mike: “Aside does not equal sidebar, just like article does not mean the widest column of a 3 column layout.”

If aside does not equal sidebar then what does? section id=sidebar — Seems like using aside is more semantic than merely naming a div or section sidebar.

Comment by Mike Robinson at August 4th, 2009 at 10:01 pm

I would argue that naming your secondary content “sidebar” would be naming for presentation instead of semantics anyway. What if you decide you don’t like your sidebar on the side and would prefer it to be below your content? Don’t think of aside as the sidebar and article as the big column in the middle. They might be like that in your design, but to be used correctly you need to think about the content and context.

I am stressing this point because this is where most people will go wrong in their use of aside. If the “sidebar” contained content that was tangentially related to the primary content of the page, then an aside is fine. If not, there are better ways to mark-up that content, and if all else fails we have div with a semantically named id/class.

Comment by John Faulds at August 4th, 2009 at 10:17 pm

If not, there are better ways to mark-up that content, and if all else fails we have div with a semantically named id/class.

As part of HTML’s direction seems to be to provide us with new elements whose names describe the function of certain types of content, e.g. header, footer, article, section, and aside isn’t a suitable choice for what would appear in the sidebars of most sites, it seems to me that there’s a whole in the spec that needs filling in this regard. Nearly every site has at least one sidebar – why should it be marked up with generic div or use one of the other new elements when every other part of the page is covered with an element named specifically for that area?

Comment by Coding A HTML 5 Layout From Scratch - Programming Blog at August 5th, 2009 at 12:15 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Coding A HTML 5 Layout From Scratch - Programming Blog at August 5th, 2009 at 12:15 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Tim Piele at August 5th, 2009 at 9:08 am

How is a pull quote stand-alone content?

Also, how does wrapping an H1 tag affect its importance to the Google Bot, in regards to SEO?

Comment by AMB Album » Coding A HTML 5 Layout From Scratch at August 5th, 2009 at 2:27 pm

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Rhyaniwyn at August 5th, 2009 at 5:57 pm

I agree with some of the analysis and still find it somewhat murky. For analogies to a magazine articles or textbooks (quotes, deeper looks at a piece of content that is outside the overall flow of an article) it’s an easy choice.

But what *about* sidebars? Sidebars are used constantly on the web, and HTML 5 is supposed to address the web-as-it-is. If section is always going to be the appropriate choice for sidebars, there is very little point in using it over div.

So WHEN is aside suitable for a sidebar?

– If it’s just navigation, obviously nav is the better choice.
– If it’s a featured article box…a Smashing Magazine article that linked here suggests aside, but I would think article, possibly nested in section.
– What about a rotating testimonials box? Article, if you have a testimonials page, but if you don’t…? Aside?
– What about the “most recent tweet” box on many sites? Aside? It’s tangential..
– What about a sidebar that combines all of these?? Think of a blog as an example–it’s a familiar layout that has a lot of useful sidebar options. Would it be best to mark up your sidebar as a section, use nav for the “recent posts”, use aside for links to your social networking sites, use article for the “about me” blurb….?

To me, it’s important to brainstorm on all these use-cases and see what fits and what doesn’t. It should lead to greater understanding of the spec and may result in necessary changes to the spec if we find things that just don’t fit.

Comment by Myfreepedia.com » Blog Archive » Coding A HTML 5 Layout From Scratch at August 6th, 2009 at 5:22 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Advertisers Blog » Coding A HTML 5 Layout From Scratch at August 11th, 2009 at 6:49 am

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Coding A HTML 5 Layout From Scratch « Get a Custom Design at August 11th, 2009 at 11:22 pm

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by 3 post « Get a Custom Design at August 11th, 2009 at 11:22 pm

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by Shopping Mall » Coding A HTML 5 Layout From Scratch at August 12th, 2009 at 12:23 pm

[...] Understanding aside where the usually misunderstood new tag is explained. [...]

Comment by icaaq at August 15th, 2009 at 8:02 am

Hi, great article!

Way back in 2008 I was at James Graham and Lachlan Hunt’s @media presentaion “Getting Your Hands Dirty with HTML 5″ http://lachy.id.au/slides/hands-on-html5/

And I stand my self next in line of @zcorpan’s comment and say that aside originally was made to be a sidebar-element, just look at slide 33 of Lachlan presentation.

Has that changed, or is the spec just misinterpreted?

Comment by Rich at August 15th, 2009 at 12:38 pm

Hi icaaq

I suspect that you and zcorpan may be correct and aside is meant to be a sidebar, however I also think this clearly shows that the spec is clear on this. My view for this site for example is that a search box, other articles, about the site etc are all related to the site but not the page (or article).

Banners are a prime example of items that are found in blog sidebars but not “tangentially” related to the content at all.

I suggest you email the WHATWG mailing list to get clarification on this.

Thanks

Rich

Comment by Colin at October 15th, 2009 at 8:52 pm

Your definition of an aside seems to directly contradict what the W3C has to say:

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. ~ W3C Aside element

Comment by Rich at October 15th, 2009 at 8:58 pm

@Colin you’re right our article does contridict this, however it was written before the extra code examples were given in the spec (hence the confusion). However, now Hixie has more clearly defined where aside can be used we’ll update the article accordingly.

Cheers

Comment by Zed at October 26th, 2009 at 3:51 am

This article still reflects a previous version of the spec. Considering the spec is still a WIP would it not make sense to note clearly which revision this/each article refers to? As Colin mentions above, this article now contradicts the spec and could easily send someone off ‘down the wrong path’…