Sidebar and aside
Build side content sections with <aside>.
aside and side content
The <aside> tag marks side content: related to the main topic but not part of it. Related links, a 'best sellers' list, an ad box or a short 'about the author' card go here.
If you remove an <aside>, the page's main point does not change; that is why it is called 'complementary' content. It usually sits next to or inside <main>; on magazine and blog pages it shows as a sidebar.
What goes inside aside
An <aside> usually holds a heading and a list. For example, a 'Best sellers' heading can sit over an <ol> with each item as an <li>. A short 'about the author' note can be a <p>.
If there is an ad in the side content, it can also go inside <aside>. The key is that the content relates to the main article but is not part of it. A page can hold more than one <aside>.
Exercise main and aside side by side
Add a <main> and an <aside> to body. Inside main put an <article>; inside the article put an <h2> (text This week). Inside aside put an <h2> (text Best sellers) and an <ol> with at least two <li>. All headings and items must be non-empty.
Show example solution
<body>
<main>
<article>
<h2>This week</h2>
</article>
</main>
<aside>
<h2>Best sellers</h2>
<ol>
<li>Ezine cheese</li>
<li>Tulum cheese</li>
</ol>
</aside>
</body>Notes on using aside
Watch two points. First, <aside> is not only for a visual sidebar; it looks at the nature of the content. Anything related to the main article but not part of it can be aside. Second, an <aside> can also sit inside an <article>; a 'fact box' inside a post is a good fit.
So <aside> is about meaning, not position. Its place can change with CSS; on the HTML side it carries only the 'complementary content' meaning.
Test yourself
-
What is <aside> most used for on a magazine page?
- A best-sellers list
- The main article
- The site logo
- The copyright line
Show answer
A best-sellers list — Correct. A best-sellers list is complementary side content; it fits aside.
-
Complete the aside closing
<aside> <h2>Best sellers</h2> <ol> <li>Ezine cheese</li> <li>Tulum cheese</li> </ol> </____>Show answer
<aside> <h2>Best sellers</h2> <ol> <li>Ezine cheese</li> <li>Tulum cheese</li> </ol> </aside> -
Match the side content tags
- aside
- Side content
- main
- Main content
- ol
- Numbered list
- footer
- Bottom section