Aside Elements (Sidebars & Callouts)
What is an Aside Element?
Think of a book or magazine article. Sometimes there's a small callout box on the side of the page containing a fun fact, a glossary definition, or an advertisement. This sidebar content is interesting but not part of the main story flow.In HTML, the <aside> element represents content that is indirectly related to the main content around it. It is commonly used for sidebars, callout boxes, advertisements, glossary terms, or quick reference links.
Why does it matter?
Using<aside> allows browsers and screen readers to differentiate between the primary content of the page and secondary elements. Screen readers can let users skip reading asides if they just want to read the main article text, improving accessibility.
How to write it
Place the<aside> outside your primary content flow (often styled with CSS to float to the left or right):
<main>
<h1>Main Article</h1>
<p>Primary paragraph text...</p>
</main>
<aside class="sidebar">
<h3>Quick Facts</h3>
<p>Sidebar info and details...</p>
</aside>
Main
Aside Sidebar
Common Mistakes
<aside>. If the user has to read it to understand the page, it does not belong in an aside.Quick Reference
<aside> — Supplementary layout element for sidebars or callout panels.Your Task
Create an `<aside>` element with class='sidebar'. Inside it, place a paragraph `<p>` with 'Sidebar info'.
index.html
Type code above to start the lesson.
Live Preview