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

Next lesson: Footer structure

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies