Understand the idea

Browsers recover from many HTML mistakes rather than refusing to show the page. That recovery can make broken markup look almost correct until a later section behaves unexpectedly.

The Elements panel shows the parsed DOM, not an exact copy of your source. A misplaced closing tag or an unclosed attribute quote may change where later nodes appear. Reduce the document to the smallest section that still reproduces the problem.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

HTML · EXAMPLE
<!-- Incorrect nesting -->
<p>A <strong>small mistake.</p></strong>

<!-- Correct nesting -->
<p>A <strong>small mistake.</strong></p>

A small mistake, explained

What goes wrong

Treating the visible symptom as the source can lead you to adjust CSS when the actual problem is earlier HTML.

How to fix it. Check markup before the affected element. Run an HTML checker and address the first relevant error before later errors that may be consequences.

Try it yourself

Open both versions in developer tools. Compare the browser-created DOM and your original source.

Further reading

W3C — Nu HTML Checker

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.