join: new@juude

get alerts for new articles

CLOSE WINDOW

html5

Structural, Layout and More

<aside></aside> (w3c)

The contents within the aside can be slightly or indirectly related to the content that it is adjacent to but be separate from it. You should be able to remove it and still have the other content make sense.

ARIA role attribute
There are a number of roles that can be applied to the aside element it would depend upon the 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. HTML 5.1 Nightly

Attributes: All Global

DON'T USE FOR STYLING
An aside should not be used to wrap information for styling only, in that case you need to use a div.

MAKE SURE IT DISPLAYS IN AND PRINTS CORRECTLY FROM ALL VERSIONS OF EACH BROWSER
In your CSS you need to make sure that this element is a block:
aside{
display: block;
}

Include the javaScript (info on this page) so that it works in all IE versions 9 down which will also allow it to print correctly from older versions of IE

ASIDE

An Aside

The contents within the aside should be related to the content that it is adjacent to but be separate from it.
The rest of the content should make sense if the aside is removed.
The aside does not require a heading.
Often place on the left or right of the main content
Depending upon its content it can be placed within a section or an article. (not if it's content repeats on other pages)
Can contain sections (you should then use a heading for the section)
A figure can be a child of an aside but it would depend upon the nature of its content.
Can be used for navigation items nav
Often used for advertisments.
Often used for pull quotes.

Jeremy Keith says ..the aside element matches the concept of a sidebar HTLM5 for Web Designers and shows the example of a quote within an aside on page 66.

Bruce Lawson and Remy Sharpe in their book Introducting HTML5 gives an example of a <nav> and a <section> within the <aside>.