Common HTML errors

Most HTML bugs come from a small set of repeatable mistakes. Once you recognize them, debugging gets faster.

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 repairs the tree and your CSS or JavaScript may target the wrong structure.

An ID appears more than once

An id must identify exactly one element in the document.

Duplicate IDs break fragment links, label associations, and JavaScript selectors. When a validator reports a duplicate, search the entire file. The second copy is often far from the first.

A relative path starts in the wrong place

This page lives at:

/projects/weather/index.html

The browser resolves images/rain.webp as /projects/weather/images/rain.webp.

If the image file sits somewhere else, you get a 404. The Network panel shows the exact URL the browser requested, which often makes the mistake obvious.

An image has no text alternative

Every img needs an alt attribute. Use useful text for an informative image. Use alt="" for a decorative image that adds no information.

Text looks like markup

The < and & characters have special meaning in HTML. Write them as character references when you want the literal character in visible text:

<p>Use &lt;main&gt; for the main content.</p>
<p>Design &amp; development</p>

Debug in a fixed order

When something breaks, I work through this list:

1. validate the HTML
2. inspect the DOM around the problem
3. check failed requests in Network
4. read Console messages
5. reduce the markup to the smallest failing example

Change one thing, reload, and check again. Random edits make the original problem harder to see.