html · level 2 · unit 4 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
holds extras that sit beside the main content.
An aside is related to the main story but not part of it: a tip, a fun fact, an advert or a list of related links. Wrap it in <aside>.
Inside an article, an aside is a side note about that article. Next to <main>, it is usually a for the whole page, and screen readers treat it as a landmark they can jump to or skip.
A good test: delete the aside, and the main content should still make complete sense.
<article>
<h2>Pancakes</h2>
<p>Whisk flour, eggs and milk until smooth.</p>
<aside>
<h3>Top tip</h3>
<p>Let the batter rest for 30 minutes.</p>
</aside>
</article>Press show my page to see it here.
Like <article>, <aside> changes nothing you can see. It only says that this part is extra.
guess first
Is the aside part of the main content?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<main>
<h1>Visiting the castle</h1>
<p>The castle is open every day from 10:00.</p>
</main>
<aside>
<h2>Nearby</h2>
<ul>
<li><a href="https://example.com/tearoom">The Old Tearoom</a></li>
<li><a href="https://example.com/park">Castle Park</a></li>
</ul>
</aside>your turn
Your turn. Add a fun fact.
On line 4, add an <aside> inside the article holding a fun fact about hedgehogs in a <p>.
Press show my page to see it here.
- the article has an asidenot checked yet
- the aside holds a fun factnot checked yet
- the aside comes after the paragraphnot checked yet
fix it
The main story is marked as an extra. Can you fix it?
Press show my page to see it here.
- the main story is in mainnot checked yet
- the fun fact is in an asidenot checked yet
- Which part is the story, and which part is the extra?
- The tree-planting steps are the main content. The fun fact is the extra.
- Swap the tags:
<main>for the first part and<aside>for the second, opening and closing.
nailed it
your extras sit to one side. :D
<aside>holds extras related to the main content.- Remove an aside and the page still makes sense.
- Inside an article, an aside is a side note.
new words in your collection
- aside
- sidebar
This lesson isn’t saved. A free account remembers every lesson you finish.