The self-closing div trap
The dashed border wraps everything: the browser ignored the slash and the div stayed open until the end of the body. It even swallowed the <script> that runs this example. Write <div class="card"></div>.
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
p inside .card? true
children of .card: P, IMG, P, SCRIPT
img has children? 0