basics of website design banner photo

HTML

HTML 5

CSS 2.1

CSS 3

Reference

HTML5 <aside> Element

The <aside> element is one of the new sectioning content elements which has beed added to HTML5, partly in response to new technology such as blogs and feeds, and partly to respond to current practices of web designers and developers.

The <aside> element is used to contain content that is only tangentially related to the rest of the content around it and which can be considered as separate from this other surrounding content. In printed media the equivalent of the <aside> element is information contained in a sidebar, but remember the <aside> element has no bearing on presentation and can, as easily be placed at the bottom of a page or in a page article, as in a literal sidebar.

Which to use - <aside>, <article> or <section>?

This question is a bit of a grey area but I think the word tangentially which is used by the W3C in the spec. is the key to the distinction. Something which is tangentially related only has a slight connection or relevance to the subject matter so, in this context, the contents of an <aside> element can be considered secondary content in relation to the other page content whereas the <article> and <section> elements contain primary content on the page.

Examples of <aside> element content.

Content which can be considered secondary, although still related, to the main page content could include advertising, related navigation such as links to related articles or blog posts, a blogroll or tweets by the same author.

<aside> Attributes

New HTML5 Elements