An HTML aside marks content that is tangentially related to the surrounding content, not content merely positioned at the side of a screen. Its meaning comes from its relationship to the nearest relevant section, article, or page.
Use the element when the material can be removed without breaking the main narrative, while still offering useful context. Ordinary CSS can then place it beside, below, or within that content.
What does the aside element define?
The aside element defines a complementary section whose connection to the main content is useful but not essential. “Tangentially related” means the content supports, explains, or extends the subject without being part of its central sequence.
Appropriate examples include a glossary note in a technical article, a pull quote, an author biography, related resources, background facts, or a short explanation of a term used in the surrounding section. A page-level related-links panel or secondary information box can also be an aside.
Do not use aside solely because a block appears visually on the side of the page. A sidebar created for layout may contain an aside, but position alone does not establish the element’s meaning. Information essential to the main instructions, argument, or process belongs in the primary content instead.
HTML aside: Article-local versus page-level placement
An article-local aside belongs inside the article it supports. For example, an article about CSS grid might contain an aside defining the gap property, listing related grid concepts, or highlighting a supporting fact. The relationship is specifically to that article.
A page-level aside sits outside the article, usually as a sibling to it within main. It can provide related reading, an author profile, a secondary navigation group, or a complementary signup prompt for the page as a whole. If a page contains several articles, a shared related-links panel may be more appropriately associated with the page than with any single article.
This distinction is semantic rather than visual. An article-local aside may render as an inset box, while a page-level aside may appear below the article on a narrow screen. Both positions are valid when the content relationship is correct.
Aside element HTML: A complete markup example
The following example shows both placements. The first aside is part of the article; the second is related to the page-level content around that article.
Example: <main> <article> <h2>Understanding grid gaps</h2> <p>The gap property sets space between grid tracks.</p> <aside> <h3>Related term</h3> <p>A grid track is a row or column in the grid.</p> </aside> </article> <aside> <h2>Related guides</h2> <ul> <li>Flexible grid columns</li> <li>Responsive layout basics</li> </ul> </aside> </main>
Keep the primary information in the article or main content. Give an aside a useful heading when its purpose is not immediately clear, and use a list or other appropriate element for the content inside it.
CSS aside styling: How to build sidebars and callouts
The aside element has no mandatory visual position, width, color, or layout behavior. Style it with the same CSS layout tools used for other elements. Contextual selectors help distinguish an article-local callout from a page-level sidebar.
A general treatment might be:
aside { padding: 1rem; border: 1px solid #cbd5e1; background: #f8fafc; } article > aside { margin-block: 1.5rem; border-inline-start: 0.25rem solid #64748b; }
To create a wide-screen sidebar for the page-level example, use a grid on the containing main element:
main { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; } main > aside { align-self: start; } @media (max-width: 48rem) { main { grid-template-columns: 1fr; } }
This layout places a direct child aside beside the article on larger screens and lets it stack naturally below the article on smaller screens. The HTML relationship remains unchanged, so the same markup supports sidebars, inline callouts, or full-width complementary sections.