Debugging markup means reading the structure, not just watching the browser's appearance. Look for wrong tag nesting, misspelled attributes, and repeated IDs. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.
What You Need to Know
Browsers often repair bad HTML silently. Fix the source rather than relying on recovery so CSS and scripts behave more predictably.
Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.
Example: See It in Action
Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.
The first line below is intentionally incorrect. Find the nesting mistake before reading the corrected version.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<p><strong>Correctly nested text</strong> belongs inside a paragraph.</p>Let’s Understand the Example
- Ul groups items where the order does not matter.
- Li is one item inside a list. Keep each item inside its parent list.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
You should see distinct list items. Ask whether their order carries meaning: if the order matters, use an ordered list; otherwise use an unordered list.
What Should You See?
The page should include “First item”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.
Try It Yourself
- Deliberately break one list item and one closing tag, then repair both.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Assuming a page is valid just because the browser displays some text.
- A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.
Key Takeaways
- Debugging markup means reading the structure, not just watching the browser's appearance.
- Ul groups items where the order does not matter.
- Browsers often repair bad HTML silently. Fix the source rather than relying on recovery so CSS and scripts behave more predictably.