About This HTML Issue
The HTML specification defines strict rules about how elements must be nested and closed. When the parser reaches a point where it needs to close a parent element — either because it encounters the parent’s explicit end tag or because a sibling element implicitly closes it — any child elements that are still open create a problem. The browser’s error-recovery mechanism will attempt to auto-close those elements, but the result may not match your intent, leading to unexpected DOM structures, broken layouts, or accessibility issues.
This error is especially common with <li>, <p>, and <td> elements because their end tags are optional in HTML. When the parser sees a new <li> while a previous <li> is still open, it implicitly closes the first one. If there are unclosed child elements inside that first <li>, you’ll get this warning.
There are several common scenarios that trigger this issue:
-
Forgetting to close an inline element (like
<span>,<a>, or<strong>) inside a list item, table cell, or paragraph. - Mismatched or misordered closing tags where elements overlap instead of nesting properly.
- Accidentally omitting a closing tag in a deeply nested structure.
Beyond validation, unclosed elements can cause real problems. Screen readers may misinterpret the document structure, CSS selectors may not match as expected, and browsers may construct a DOM tree that differs from what you intended. Fixing these issues ensures consistent rendering across browsers and a reliable experience for all users.
How to Fix
- Locate the open element mentioned in the error. The validator usually tells you which element is still open.
- Add the missing closing tag in the correct position — before the parent element’s end tag or before the next sibling that would implicitly close the parent.
- Verify proper nesting order. Elements must be closed in the reverse order they were opened (last opened, first closed).
Examples
Unclosed <span> inside a list item
The <span> is never closed, so when the parser encounters the second <li>, it implicitly closes the first <li> while <span> is still open:
<!-- ❌ Triggers: End tag "li" implied, but there were open elements -->
<ul>
<li><span>First item</li>
<li>Second item</li>
</ul>
Close the <span> before the <li> ends:
<!-- ✅ Correct -->
<ul>
<li><span>First item</span></li>
<li>Second item</li>
</ul>
Implicit <li> closure with open child element
When a new <li> appears, the previous <li> is auto-closed. If a <strong> tag is still open inside it, this error is raised:
<!-- ❌ Triggers the error -->
<ul>
<li><strong>Important text<li>Other item</li>
</ul><!-- ✅ Correct -->
<ul>
<li><strong>Important text</strong></li>
<li>Other item</li>
</ul>
Unclosed <a> inside a <p> before a block element
When the parser encounters a <div> (or another block element), it implicitly closes the <p>, leaving the <a> unclosed:
<!-- ❌ Triggers the error -->
<p>Visit <a href="/about">our page
<div>Other content</div><!-- ✅ Correct -->
<p>Visit <a href="/about">our page</a></p>
<div>Other content</div>Misordered closing tags
Closing tags must appear in reverse order of their opening tags. Overlapping elements are invalid:
<!-- ❌ Triggers the error -->
<p><em><strong>Bold italic text</em></strong></p><!-- ✅ Correct: close in reverse order -->
<p><em><strong>Bold italic text</strong></em></p>Unclosed element in a table cell
<!-- ❌ Triggers the error -->
<table>
<tr>
<td><span>Data</td>
<td>More data</td>
</tr>
</table><!-- ✅ Correct -->
<table>
<tr>
<td><span>Data</span></td>
<td>More data</td>
</tr>
</table>When you see this error, look for the unclosed element the validator identifies, add its closing tag in the correct position, and make sure all elements follow proper nesting order. If multiple instances of this error appear in your document, fixing the first one often resolves several others downstream.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.