TaskBuild a blog index. <header> with <h1>Anna's notes</h1> and a <nav aria-label='Primary'><ul><li>Home</li><li>About</li></ul></nav>. <main> with two <article> each containing <h2> title and <p> body. <aside> at body level with <h2>Recent</h2> and <ul>. <footer> with <nav aria-label='Footer'><ul><li>Privacy</li></ul></nav> and <p>Β© 2026</p>.
Module capstone: rebuild a div-soup page
200 XP14 min
Theory
Putting A2 together
You've seen each semantic element in isolation. Now combine them into a complete page with five landmarks and proper heading hierarchy.
The page we're rebuilding
A "blog index" with:
- Site header (logo + primary nav)
- Main content area with two blog post articles
- A sidebar listing recent posts
- A site footer with secondary nav + copyright
Currently it's built as a 6-div soup that screen readers parse as one giant unstructured wall. Your job: rebuild it with semantic tags.
Lighthouse + axe checklist
After your refactor, the page should pass:
- Exactly one `<h1>`
- No heading-level skips
- Each landmark (
<nav>) labeled or unique - Articles wrap independently syndicatable content
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.