Understanding aside

by .

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.

62 Responses on the article “Understanding aside”

  • Jason Grant says:

    I have major issues with .

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

    • Rich Clark says:

      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.

  • Stuart Charlton says:

    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?

  • John Allsopp says:

    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.

  • Scott Nellé says:

    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?

  • John Faulds says:

    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)?

  • Bruce Lawson says:

    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

  • D Ross says:

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

  • D Ross says:

    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.

  • D Ross says:

    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.

  • Scott Nellé says:

    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.

  • @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.

  • Dari says:

    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.

  • Stephen Hay says:

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

  • Ben says:

    @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/

  • Ben says:

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

  • DRoss says:

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

  • griff says:

    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)

  • griff says:

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

    thanks,

    -griff

  • griff says:

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

    • Rich Clark says:

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

  • David says:

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

  • David says:

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

  • zcorpan says:

    <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! :-)

  • Rich Clark says:

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

  • David says:

    @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”>

  • Rich says:

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

  • Georgiy says:

    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?

  • Precog says:

    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.

  • Precog says:

    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.

  • @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.

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

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

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

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

  • David says:

    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.

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

  • John Faulds says:

    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?

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

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

  • Tim Piele says:

    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?

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

  • Rhyaniwyn says:

    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. :-)

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

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

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

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

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

  • icaaq says:

    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?

  • Rich says:

    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

  • Colin says:

    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

  • Rich says:

    @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

  • Zed says:

    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’…

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

  • […] Liens vers l’article Comprendre Aside en anglais […]

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

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

  • […] tag for a sidebar, that is not the intent of it; the aside HTML5 tag is best described over at http://html5doctor.com/understan….Frank Stallone • Insert a dynamic date hereView 1 CommentCannot add comment at this […]

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

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

  • […] genauer beschreibt das Understanding <aside>, gefunden via […]