Quest 2 · Structure with meaning

Quest 2 · hands-on · ~35 min

35:00

🎯 Mission

You start with: your first-page index.html.

You finish with: a full recipe page using header, nav, main, article and footer.

Quest complete when: the nav links jump to the Ingredients and Steps headings, and the image has alt text.

+60 XP🏆 Semantic Scribe

Step 1 · Know the landmark tags

Semantic tags say what each part IS, so screen readers, search engines and other devs understand the page.

<div> means "a box". Semantic tags mean "a box that is a header / the main content / an article". Same look, much more meaning.

Step 2 · Replace your

Save any small image as recipe/potion.png (or keep the broken image; the alt text will show instead).

recipe/index.html

<body>
  <header>
    <p>Grimble's Cookbook</p>
    <nav>
      <a href="#ingredients">Ingredients</a> ·
      <a href="#steps">Steps</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Potion of Healing</h1>
      <img src="potion.png" alt="A red potion in a round glass flask" width="200">
      <p>Restores 50 HP. Tastes like cherries.</p>

      <h2 id="ingredients">Ingredients</h2>
      <ul>
        <li>2 red mushrooms</li>
        <li>1 cup spring water</li>
        <li>A pinch of fairy dust</li>
      </ul>

      <h2 id="steps">Steps</h2>
      <ol>
        <li>Boil the water.</li>
        <li>Add mushrooms and simmer for 5 minutes.</li>
        <li>Stir in fairy dust. Serve warm.</li>
      </ol>
    </article>
  </main>

  <footer>
    <p>Made by <a href="https://github.com/YOUR-USERNAME">you</a></p>
  </footer>
</body>

Step 3 · Try the links

Reload and click Ingredients in the nav.

✅ You should see: the page jumps to the Ingredients heading. href="#ingredients" targets the element with id="ingredients".

Step 4 · Commit it

git add .
git commit -m "Add recipe page"
git push

Landmarks are map markers. A screen reader user can jump straight to <main> the way you'd fast-travel to a town.

💡 What just happened (plain English)

<ul> is for lists where order doesn't matter, <ol> where it does. One <h1> per page, then <h2>s under it, like chapters. alt describes an image for people who can't see it, and is what shows if it fails to load.

🏁 Checkpoint

☐ my page uses header, nav, main, article, footer
☐ ingredients are a <ul>, steps an <ol>
☐ the image has a descriptive alt
☐ pushed to GitHub

🏆 Tick every box → achievement unlocked: Semantic Scribe (+60 XP)