There are a lot of confusion around this HTML5 aside element. Its definition suggests it should be used for content surrounding the main content. 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.
How should it be used?
How strict should the relationship be? I’ll say a lot! Content in an aside tag should only contain examples like polls, glossary or related links.
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo, massa id rutrum sollicitudin, magna neque elementum nunc, nec consectetur sem neque a metus. <aside> <h1>Glossary</h1> <dl> <dt>Lorem</dt> <dd>ipsum dolor sit amet</dd> </dl> </aside> </acrticle> |
Since this aside is contained within an article, a parser should understand that the content of this aside is directly related to the article itself. It’s possible to use outside article and p as well and will be understood as related content but not as heavy as aside content inside the article element.
Incorrect use of aside
Everything that’s not directly related to the content is wrong to wrap around an aside element. Navigation ads, search boxes and blogrolls are examples of content that is not good for aside.
Definition
The aside tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content.
Interactive PHP
Learn interactive PHP click here to find out more
