Rescue a div-soup page

This recipe page is built from divs and spans. Rebuild it with semantic HTML so it has the same content but real structure:

1. Set the page language to English.

2. Use one header (containing the site name and a nav), one main and one footer.

3. The navigation items go to pages, so make them real links (/, /recipes, /shop) inside the nav.

4. The recipe title is the page's only h1; "Ingredients" and "Method" are h2s. The ingredients are a list and the method steps an ordered list.

5. "Save recipe" is an action: make it a <button>. Give the photo a useful alt.

What Check tests

The page language is English
There is exactly one header, nav, main and footer, with the nav inside the header
The nav has real links to /, /recipes and /shop
One h1 (Banana bread) and h2s for Ingredients and Method
Ingredients are a list of 4 items and the method is an ordered list of 3 steps
"Save recipe" is a button
The photo has a useful alt

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.

Command Palette