Problem Statement
What type of content goes in an <aside> element?
Explanation
The aside element contains content that is tangentially related to the content around it. This includes sidebars, pull quotes, advertising, groups of nav elements, or related links. The aside content should be separable from the main content. If removed, the main content should still make sense. Aside is commonly used for blog sidebars with related posts, author bios, glossaries, or supplementary information. It can appear within article elements for content related to that article, or outside for site-wide sidebars. Using aside helps screen readers identify supplementary content that users might want to skip. It improves semantic structure and document outline. Not all sidebar content needs to be in aside, only content that is related but not essential.
Code Solution
SolutionRead Only
<!-- Sidebar aside -->
<main>
<article>
<h2>Main Article</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Related Post 1</a></li>
<li><a href="#">Related Post 2</a></li>
</ul>
</aside>
</main>
<!-- Aside within article -->
<article>
<h2>Understanding JavaScript</h2>
<p>JavaScript is a programming language...</p>
<aside>
<h3>Did you know?</h3>
<p>JavaScript was created in just 10 days!</p>
</aside>
<p>More content...</p>
</article>
<!-- Pull quote aside -->
<article>
<p>Content before quote...</p>
<aside>
<blockquote>
"Semantic HTML makes the web better for everyone."
</blockquote>
</aside>
<p>Content after quote...</p>
</article>