MP Web Studio
HTMLFoundation track
49 / 120

LESSON 49 OF 120

Build: secondary content with aside

Separate related but secondary information into an aside.

Official sourceWHATWG HTML — asideReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Separate related but secondary information into an aside. Semantic structure should describe meaning, not visual appearance.

Correct example
<article><h1>Semantic HTML</h1><p>Elements describe the role of content.</p></article><aside><h2>See also</h2><p>CSS controls visual presentation.</p></aside>

aside represents content indirectly related to the surrounding material that can be separated without damaging the main idea.

Common mistake
<aside><p>The primary article is here.</p></aside>

The text declares itself as primary content, so aside is inappropriate. The element is reserved for related secondary information.

STEP 2 · APPLY

Your exercise

Complete the example. Separate related but secondary information into an aside.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • Secondary information uses aside.
  • The aside has related content.
Explain the solution logic

Keep the primary idea in article and move only the related note into a separate or nested aside.