End tag X seen, but there were open elements.

HTML follows a strict nesting model where elements must be closed in last-in, first-out (LIFO) order. Think of it like stacking boxes: you must close the innermost box before you can close the one containing it. When you write </li> but a <span> inside that <li> is still open, the browser sees a conflict — you’re trying to close the outer element while an inner element is dangling.

This error typically occurs due to one of these situations:

• A missing closing tag for a nested element (e.g., forgetting </span> inside a <li>).
• Misordered closing tags where you accidentally close elements in the wrong sequence.
• Typos in tag names where the intended closing tag doesn’t match the opening tag, leaving the real element unclosed.

While browsers use error-recovery algorithms to guess what you meant, different browsers may handle malformed nesting differently. This can lead to inconsistent rendering, broken styles, and unexpected DOM structures. Screen readers and other assistive technologies rely on a well-formed DOM tree, so broken nesting can also cause accessibility issues. Keeping your HTML properly nested ensures predictable behavior across all browsers and tools.

How to fix it

1. Locate the line referenced in the validator error. It will tell you which closing tag was seen and which elements were still open.
2. Trace backward from the closing tag to find the unclosed element.
3. Add the missing closing tag in the correct position, or reorder closing tags so they mirror the opening tags in reverse.
4. Re-validate to confirm the fix, since one nesting error can cascade into multiple warnings.

Examples

❌ Missing closing tag for a nested element

<ul>
  <li><span>Item one</li>
  <li>Item two</li>
</ul>

The <span> inside the first <li> is never closed. The validator sees </li> but <span> is still open.

✅ Fixed: close the inner element first

<ul>
  <li><span>Item one</span></li>
  <li>Item two</li>
</ul>

❌ Misordered closing tags

<p>This is <strong><em>important</strong></em> text.</p>

Here </strong> appears before </em>, but <em> was opened inside <strong>, so <em> must close first.

✅ Fixed: close tags in reverse order

<p>This is <strong><em>important</em></strong> text.</p>

❌ Multiple levels of broken nesting

<div>
  <section>
    <p>Hello <a href="/">world</p>
  </section>
</div>

The <a> element is never closed. The </p> tag is encountered while <a> is still open.

✅ Fixed: close the anchor before the paragraph

<div>
  <section>
    <p>Hello <a href="/">world</a></p>
  </section>
</div>

❌ Typo in a closing tag causing a mismatch

<p>Click <a href="/help">here</b> for help.</p>

The closing </b> doesn’t match the opening <a>, so the <a> element remains open when </p> is reached.

✅ Fixed: use the correct closing tag

<p>Click <a href="/help">here</a> for help.</p>

A helpful way to avoid this error is to visualize your HTML as an outline — every level of indentation represents a nesting level, and closing tags should “unwind” in exact reverse order. Many code editors also offer bracket and tag matching features that highlight mismatched or unclosed tags in real time.

Learn more:

MDN Reference

HTML Element Reference - MDN Web Docs

→

WHATWG Spec

HTML Parser - WHATWG HTML Standard

→

web.dev Article

Document Structure - web.dev

→