Nibras Code
AppsQR generatorRememberContactHome

Programming

Debugging HTML

The validator, unclosed tags and wrong nesting.

All lessons · HTML lessons: learn from scratch

How to hunt for errors

HTML does not stop with an error: the browser tries to “fix” bad code and the result differs from what you expected. So you need tools to see the problem. The best friend is the browser's Inspect (F12) panel, which shows the real tree the browser built.

  1. Right-click an element and choose Inspect.
  2. Compare the real tree with the structure you expected.
  3. Fix the first mistake from the top first, since later ones may stem from it.

The most common mistakes

  • An unclosed tag: all the following content is displayed wrongly.
  • Wrong nesting: <b><i>…</b></i>.
  • A missing quote: <a href="page.html>.
  • File name case: Photo.JPG is not photo.jpg.
  • Missing encoding makes letters break.
  • The same id used twice.
<!-- wrong -->
<p>Hello <b>world</p></b>
<img src="Photo.JPG" alt="">

<!-- right -->
<p>Hello <b>world</b></p>
<img src="photo.jpg" alt="A tidy desk">

The validator and a checklist

The W3C Markup Validator lets you paste code for checking and lists every mistake with its line number. Before publishing each page run through this short list: is there a doctype? lang set? title unique? alt on every image? heading levels in order?

Author: Nibras Code