Web Build 021

Semantic structure: Nested heading order

Build nested heading order inside the persistent Community workshop: Nested heading order starter project.

Semantic structure

7 minutes Beginner Lesson 21 of 120

headernavmainsectionarticlefooter

Lesson 21 of 120 0/120 lessons 0/18 missions Semantic structure · 7 minutes

0%

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Create the page header

Replace the top div with the exact header and h1 for Community workshop: Nested heading order.

Target: index.html · Replace the first generic div.
Evidence: A header landmark contains the page h1.

index.html html

Preview allowlisted render

Console text only

Instructions 7 minutes

Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.

Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.

Create the page header

Replace the top div with the exact header and h1 for Community workshop: Nested heading order.

Target index.html · Replace the first generic div. Evidence A header landmark contains the page h1. Snippet

<header>
  <h1>Community workshop: Nested heading order</h1>
</header>

Next up

Build the nested heading order flow

Add the exact labeled navigation, main landmark, and named section shown below.

Target index.html · Between header and the final generic div. Evidence Navigation has a name and main contains a section tied to its h2. Snippet

<nav aria-label="Primary">...</nav>
<main>
  <section aria-labelledby="lesson-title">...</section>
</main>

Next up

Finish with a footer

Replace the bottom div with the exact footer and course-note paragraph.

Target index.html · Replace the final generic div. Evidence The document ends with a footer after main. Snippet

<footer>
  <p>Course notes for nested heading order.</p>
</footer>

Next up

Save progress

Keep learning across sessions.

Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.

Checking account status...

Progress sync is idle.

0XP New learnerrank 0day streak 0best streak 0daily streak 0lessons 0courses 0missions 0tasks Noverified

Continue

Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.

Lesson support

What to notice while you play.

Objective

Complete a project-shaped nested heading order build while preserving each passing edit.

Hint

Start with the Current task. Open index.html, use Show exact edit when needed, Run, then follow the highlighted next task.

Why it matters

Semantic structure becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.

Common mistakes

Editing the wrong file instead of index.html.
Replacing earlier passing work instead of preserving it for the next step.
Pressing Check before every task has passed Run.
Expecting learner HTML, CSS, or JavaScript to execute; the preview uses reviewed scene states only.

Reference

Snippets in this lesson.

Run

Render a simulated preview from the current lesson snippet.

Check

Save the lesson after the required task snippets are complete.

Hint

Show the lesson hint without changing progress.

Reset

Clear local Web lab scratch state for this browser.