Forms and debugging
Common HTML errors
Diagnose broken nesting, duplicate IDs, missing alternatives, malformed characters, and incorrect paths with a repeatable process.
9 minute lesson
Most HTML bugs come from a small set of mistakes.
Elements close in the wrong order
Nesting must close from the inside out:
<p><strong>Important</strong></p>If the closing order is wrong, the browser has to repair the tree.
An ID appears more than once
An id must identify one element in the document.
Duplicate IDs make fragments, labels, and JavaScript selectors unreliable. Search the complete file when the validator reports one.
A relative path starts in the wrong place
This page:
/projects/weather/index.htmlresolves images/rain.webp from /projects/weather/images/rain.webp.
Inspect the requested URL in the Network panel. It often makes the mistake obvious.
An image has no text alternative
Every img needs alt. Use useful text for an informative image and alt="" for a decorative one.
Text looks like markup
The < and & characters have special meaning in HTML. Write them as character references when you want the literal character in text:
<p>Use <main> for the main content.</p>
<p>Design & development</p>Debug in a fixed order
When something breaks:
- validate the HTML
- inspect the DOM around the problem
- check failed requests in Network
- read Console messages
- reduce the markup to the smallest failing example
Change one thing, reload, and check again. Random edits make the original problem harder to see.
Lesson completed