Sidebar
To add a sidebar to your site, use the <aside>
tag to
create a sidebar. You must wrap the rest of your body code in a
<main>
tag. To put the sidebar on the left, write
code like such:
<aside>
<h3>
Navigation
</h3>
</aside>
<main>
<h1>
Hi!
</h1>
</main>
A right-positioned sidebar can also be created by putting the sidebar
code after the <main>
element, which is ideal for
placing embedded information.
<main>
<h1>
Hi!
</h1>
</main>
<aside>
<h2>
Embed
</h2>
</aside>
Warning
You can't use two sidebars at once, and non-sidebar code must be
wrapped in a <main>
tag.
Support | Chrome | Safari | Firefox | Edge | Opera |
---|---|---|---|---|---|
<aside> |
5+ | 5+ | 4+ | 12+ | 11.5+ |
<main> |
26+ | 7+ | 21+ | 12+ | 16+ |
Information for this support table comes from Can I Use.