benjaminolsen.devRepair the meaning of a recipe
The recipe looks roughly organised, but generic containers imitate its heading and lists. Its image has no useful alternative, and the table lacks headings. Repair the meaning while preserving the recipe.
Get started
- Read the starter HTML rather than judging only its appearance.
- Replace the fake heading, ingredients and method with the matching native elements. Repair the image alternative and table headings.
- Verify source order and keyboard navigation, then run the checks.
Requirements
- Preserve the recipe, all ingredients, all method steps and serving values.
- Use a real h1 followed by h2 section headings.
- Use a real ul and ol with at least three items each.
- Provide meaningful alt and figcaption for the supplied illustration.
- Label the table with a caption and th column headings.
- Keep working navigation and the skip link.
Manual checks
- Open your saved index.html directly in a browser. Follow every link with Tab and Enter, keeping focus visible.
- Read the headings and content in source order. Check that the wording and alternative text match the content.
Hints
Hint 1
Start with tags that currently say div even though their text names a topic or sequence.
Hint 2
Use h1 for the title, ul/li for the ingredient group and ol/li for the method. Read the image as someone who cannot see it.
Hint 3
Replace the title div with h1, each ingredient div with li inside ul, each step div with li inside ol, and the first table row cells with th scope="col". Add a caption and describe the toast illustration in alt.
Explain your decision
Name one repair that improves the document even when its appearance changes very little.
Compare a practice solution after your attempt
This is one valid solution, not the only design. Compare the structure and behaviour rather than copying the appearance.
Download practice solution