This element/tag was introduced in HTML5.

Just as the <header> element matches the concept of a master head, the <aside> element matches the concept of a sidebar. Content appearing to the left or to the right of the main content is not reason enough to use the <aside> element. Once again, it’s the content that matters, not the position. The <aside> element should be used for tangentially related content. If you have a chunk of content that you consider to be separate from the main content, then the <aside> element is probably the right container for it. Ask yourself if the content within an <aside>  element could be removed without reducing the meaning of the main content of the document or section.

Pull quotes are a good example of tangentially related content; they’re nice to have, but you can remove them without affecting the comprehension of the main content.

Remember, just because your visual design calls for some content to appear in a sidebar doesn’t necessarily mean that <aside> is the correct containing element. It’s quite common, for example, to place an author bio in a sidebar. That kind of data is best suited to the <footer> element—the specification explicitly mentions authorship information as being suitable for footers.

90% of the time, the <header> element will be positioned at the top of your content, the <footer> element will be positioned at the end of your content, and <aside> element will be positioned to one side. But don’t get complacent. Stay on your toes and watch out for the remaining 10%.

An example of the <aside> element being used inside the <section> element.
Click here to view the example.

The <aside>element can also be used to mark up content which is relevant to your page as a whole – containing blogrolls, additional navigation, even ads – and when this is the scope of your <aside> element it has to be placed outside of the article section.

Click here to view the example.

Next, view the example of the <aside> element being used inside the <article>element.

Click here to view the example.

Whether you use the <aside> element for the former or the latter use, you need to remember that the <aside> element is for secondary content regardless of the visual design of this content. This also implies that the <aside> element should be used for e.g. pull-quotes as they are a part of your content – you should not use the <blockquote> element.

Tasks to Complete

• Complete all available resources found in lesson resources.
• Read all content on this page.
• Follow any links and review their contents.
• There are no assignments associated with this section of the lesson that must be submitted