HTML Tags
HTML5 <aside> Tag
The <aside> tag represents content that is tangentially related to the surrounding content, such as a sidebar, pull quote, or related-links box. It is a semantic HTML5 element.
The <aside> Tag
The <aside> element marks content that is indirectly related to the main content around it. Typical uses are sidebars, advertising, groups of related links, author bios, and pull quotes. Removing an aside should not break the meaning of the main content.
It is a block-level semantic element. When placed inside an <article>, the aside relates to that article; when placed outside, it relates to the whole page.
Syntax
Example
<aside>
<h3>Related</h3>
<p>Side content...</p>
</aside>Example
Example
<!DOCTYPE html>
<html>
<body>
<article>
<h2>The History of the Web</h2>
<p>The web was invented in 1989 by Tim Berners-Lee.</p>
</article>
<aside style="background:#f1f3f5; padding:12px;">
<h3>Did you know?</h3>
<p>The first website is still online today.</p>
</aside>
</body>
</html>More Examples
Example
<!DOCTYPE html>
<html>
<body>
<article>
<h2>Product Review</h2>
<p>This gadget performed well in our tests.</p>
<aside style="border-left:4px solid #1a73e8; padding-left:10px;">
<p>Related: See our full buying guide.</p>
</aside>
</article>
</body>
</html>ℹ️
Do not overuse <aside>. Reserve it for content that is genuinely supplementary. For the main flow of a page, use <section> or <article>.
Key Takeaways
- <aside> holds content tangential to the main content.
- Common uses: sidebars, callouts, related links, pull quotes.
- It is a semantic block-level element.
- Its meaning depends on whether it is inside an article or the page.
- Removing it should not break the main content.