About This HTML Issue
When the HTML parser reaches a </li> closing tag, it expects all elements nested within that list item to already be closed. If any child element remains open, the browser must guess where to close it, which can lead to an unexpected DOM structure. This error typically occurs when a closing tag is accidentally omitted, misspelled, or placed in the wrong order.
This matters for several reasons. First, browsers may interpret the intended structure differently, causing inconsistent rendering across platforms. Second, assistive technologies like screen readers rely on a well-formed DOM to convey content correctly — unclosed elements can confuse the reading order or grouping of content. Third, unclosed elements can cascade into other validation errors, making it harder to identify the real problems in your markup.
Common causes of this error include:
-
Forgetting to close an inline element like
<span>,<a>,<strong>, or<em>inside a list item. -
Forgetting to close a block-level element like
<div>or<p>inside a list item. - Nesting elements in the wrong order, so closing tags don’t match their opening tags.
-
Typos in closing tags (e.g.,
</sapn>instead of</span>).
To fix the issue, locate the <li> mentioned in the error and check every element opened inside it. Make sure each one has a corresponding, correctly spelled closing tag, and that they are closed in the reverse order they were opened (last opened, first closed).
Examples
Missing closing tag on an inline element
❌ Invalid: The <span> is never closed before </li>.
<ul>
<li>
<span>Example text
</li>
</ul>
✅ Valid: The <span> is properly closed.
<ul>
<li>
<span>Example text</span>
</li>
</ul>Missing closing tag on a link
❌ Invalid: The <a> element is left open.
<ul>
<li>
<a href="/about">About us
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
✅ Valid: Both <a> elements are closed before their parent </li>.
<ul>
<li>
<a href="/about">About us</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>Multiple unclosed nested elements
❌ Invalid: Both <strong> and <a> are left open inside the <li>.
<ol>
<li>
<a href="/sale"><strong>Big sale
</li>
</ol>✅ Valid: Nested elements are closed in reverse order (innermost first).
<ol>
<li>
<a href="/sale"><strong>Big sale</strong></a>
</li>
</ol>Misspelled closing tag
❌ Invalid: The closing tag </sapn> doesn’t match <span>, so the <span> remains open.
<ul>
<li>
<span>Item one</sapn>
</li>
</ul>✅ Valid: The closing tag is spelled correctly.
<ul>
<li>
<span>Item one</span>
</li>
</ul>Incorrectly ordered closing tags
❌ Invalid: The </em> and </strong> tags are closed in the wrong order, leaving <em> effectively unclosed when </strong> is reached.
<ul>
<li>
<strong><em>Important note</strong></em>
</li>
</ul>✅ Valid: Closing tags are in the correct reverse order.
<ul>
<li>
<strong><em>Important note</em></strong>
</li>
</ul>Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.