<aside>: The ASIDE Element
Last updated: 2026-10-13
<aside>The ASIDE Element
Represents content tangentially related to the main content, such as a sidebar, note, pull quote or ad.
| Category | Semantic |
|---|---|
| Content Model | Flow content |
| Allowed Parents | Any element that accepts flow content |
| Content Tag | Yes — requires closing </aside> tag |
| Status | Standard |
📝 Syntax
<aside>aside content</aside>▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <aside> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： aside need not be visually on the side; the key is its tangential semantic relationship.
❓ FAQ
QWhat is the difference between aside and div?
A
<aside> has a clear meaning: content tangentially related to the main content (sidebar, ad slots, glossary entries, related links); <div> has none. The test: if you delete this block, is the main content still complete? If yes, aside fits.QShould aside go inside or outside article?
ABoth are valid with different meanings: inside an
<article> it is a supplement to that article (an in-text citation or gloss); outside it is a supplement to the page (such as a site sidebar). Choose the level by where the content belongs.QIs aside suitable for navigation?
ASite-level sidebar navigation belongs to
<nav>. <aside> fits non-navigational content loosely related to the main content: a table of contents, a tag cloud, recommended reading — supplements, not navigation.🏷️ Related Tags
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
