The <aside> element represents a page section containing relatable, yet separate content from the page it’s on. You may refer to these as sidebars in print mediums, but they don’t always have to shift to a side of the main content. Web designers and developers can be creative with usage.
<aside> elements might be a good fit for pull quotes, sidebars, advertising, and groups of secondary navigation outside of the bounds of the main content on the page.
Example
Syntax
1 |
<aside>
|
2 |
<h2>Norway</h2> |
3 |
<p>Norway is a Scandinavian country encompassing mountains, glaciers and deep coastal fjords. Oslo, the capital, is a city of green spaces and museums.</p> |
4 |
</aside>
|
Result
Browser Support
The <aside> tag is supported in all modern browsers. Read more on caniuse.com.
Attributes
The <aside> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
Content
An <aside> element allows flow, sectioning, and palpable content that is tangentially related to the main content of a page.
ARIA: Complementary Role
You may come across an ARIA role of complementary that is used to denote supported content outside of the main content of a web page.
This role is known as a landmark role. Since the addition of more semantic sectioning elements in HTML, it is recommended we use the aside element as opposed to the ARIA-supported element.
Related HTML Elements
- There are several other sectioning elements, useful for splitting up content on a page in a descriptive way:
<article>,<aside>,<form>,<header>,<footer>,<main>,<nav>, and<section>are all sectioning elements.
Learn More
