Semantic page layout

What you will build

Restructure the page so people and assistive technology find content quickly.

Understand the idea first

Semantic regions state each block's responsibility and create useful landmarks.

Build it step by step

<body>
  <header>
    <h1>My learning page</h1>
    <nav aria-label="Primary">
      <a href="#progress">Progress</a><a href="#notes">Notes</a>
    </nav>
  </header>
  <main>
    <section id="progress">…</section>
    <article id="notes">…</article>
    <aside><h2>References</h2></aside>
  </main>
  <footer><small>Last updated: 2026-09-21</small></footer>
</body>

Sketch header, main, and footer before moving markup.
Keep one main and place primary navigation in header.
Use section for progress, article for a standalone note, and aside for support.
Test fragment links and unique ids.

Read the important lines

nav wraps a meaningful navigation group.
A section normally has a heading; an article stands alone.
Header and footer meaning depends on nesting.

Common mistakes and what to check

Symptom	What to check
Every div becomes section	Keep div for containers without a topic.
Several main elements	Use one page main landmark.
Essential steps in aside	Aside is supplementary.

Practice without copying

Design semantic regions for about.html.

Check the answer after you try

Use header > nav, main > article with a skills section, then footer.

Completion check

My page contains the required new content
I can explain the key tags or attributes without the answer
I deliberately created and fixed at least one error