Syntax
<aside>
<h3>Related Links</h3>
<ul>...</ul>
</aside>Examples
Page Sidebar
Using aside as a sidebar with supplementary content.
<main>
<article>...</article>
</main>
<aside>
<h3>Popular Posts</h3>
<ul>
<li><a href="#">Post One</a></li>
<li><a href="#">Post Two</a></li>
</ul>
</aside>Pull Quote Within an Article
Using aside inside an article for a related but separate callout.
<article>
<p>Long article text continues here...</p>
<aside>
<blockquote>Key takeaway: semantic HTML improves accessibility.</blockquote>
</aside>
<p>The article continues...</p>
</article>Author Bio Aside
A tangential author information box.
<article>
<h2>10 Tips for Clean Code</h2>
<p>Article content...</p>
</article>
<aside>
<h4>About the Author</h4>
<p>Jane writes about software craftsmanship.</p>
</aside>Best practices
- Use <aside> for content that is related but not essential to understanding the main content
- Do not use <aside> purely as a styling hook for a sidebar-looking box that is actually essential content
- An <aside> nested inside an <article> should relate specifically to that article, not the whole page
- Give the aside its own heading when it has one, so it makes sense as an independent block
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<header>
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.
The <header> element represents introductory content for its nearest ancestor sectioning element, typically containing a logo, site title, navigation, or search form. A page can have multiple <header> elements — one for the page itself, and others for individual <article> or <section> elements. It has no default visual styling of its own.<nav>
The <nav> element marks a section of major navigation links, such as a main menu, table of contents, or pagination controls. Not every group of links needs to be a <nav> — reserve it for primary navigation blocks. Screen readers can identify <nav> regions, letting users jump straight to navigation or skip past it.<footer>
The <footer> element represents closing content for its nearest ancestor sectioning element, typically containing copyright notices, contact information, related links, or author details. Like <header>, a page can have multiple footers — one for the whole page and others scoped to individual articles or sections.<section>
The <section> element groups related content that typically has its own heading, representing a distinct thematic section of a document — like a chapter, tab panel, or a chunk of a landing page. Unlike <div>, which carries no semantic meaning, <section> tells browsers and assistive technology that its content forms a standalone, related group. If content does not have a natural heading or is not thematically distinct, a plain <div> is usually the better choice.