Div soup versus semantic HTML, as assistive tech sees it
The two halves look alike. Only one has structure a screen reader can navigate: "Easy bread, heading level 2", "Save recipe, button", "list, 4 items".
Good HTML picks the element that matches the meaning, keeps structure and order logical, avoids deprecated and fake controls, and stays lean for speed; these are the mistakes reviewers spot first.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Rewrite this as semantic HTML: <div class="nav"><span onclick="location='/'">Home</span> <span onclick="location='/blog'">Blog</span></div><div class="h">My Blog</div>.
Find and fix four mistakes: <img src="chart.png"><a href="report.pdf">Click here</a><br><br><br><font size="2">Updated 2024</font>.
Explain it without notes
What is div soup, and why is it a problem beyond accessibility?
When should you use a link and when a button?
Why is <div /> a bug in HTML but fine in React?
Name five HTML habits that improve performance.
Preview
Console
Nothing logged yet.Expected console output
soup: 0 heading, 0 button, 0 list
semantic: 1 heading, 1 button, 1 list