About This HTML Issue
When the browser encounters a </body> tag while elements like <div>, <section>, <p>, or <span> are still open, it must guess where those elements were supposed to end. Different browsers may guess differently, leading to inconsistent rendering and a DOM structure that doesn’t match your intent. This can cause layout problems, broken styling, and accessibility issues — screen readers rely on a well-formed DOM to convey the correct document structure to users.
The root causes of this error typically include:
- Forgetting a closing tag — the most common scenario, especially with deeply nested structures.
-
Mismatched tags — closing tags that don’t correspond to their opening tags (e.g., opening a
<div>but closing it with</section>). - Copy-paste errors — duplicating or deleting code that leaves behind orphaned opening tags.
- Incorrect nesting — overlapping elements where tags cross boundaries instead of being properly nested.
To fix the issue, work through the validator’s error list from top to bottom. The error message usually identifies which elements are unclosed. Find each one and either add the missing closing tag in the correct position or remove the unnecessary opening tag. Using consistent indentation makes it much easier to spot mismatches visually.
Examples
Missing closing tag
This triggers the error because the <section> element is never closed:
<body>
<section>
<h1>Welcome</h1>
<p>Hello, world!</p>
</body>
Add the missing </section> closing tag:
<body>
<section>
<h1>Welcome</h1>
<p>Hello, world!</p>
</section>
</body>Multiple unclosed elements
Here, both the <div> and the <ul> are left open:
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
</body>Close each element in the correct (reverse) order:
<body>
<div class="sidebar">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</body>Mismatched closing tag
A mismatch between opening and closing tags can also produce this error. The <div> is opened but </section> is used to close it, leaving the <div> unclosed:
<body>
<div class="content">
<p>Some text here.</p>
</section>
</body>Fix the closing tag so it matches the opening tag:
<body>
<div class="content">
<p>Some text here.</p>
</div>
</body>Overlapping (improperly nested) elements
Elements that overlap instead of nesting properly will also trigger this error. Here the <b> and <i> tags cross each other’s boundaries:
<body>
<p><b>Bold and <i>italic</b> text</i></p>
</body>Ensure elements are closed in the reverse order they were opened:
<body>
<p><b>Bold and <i>italic</i></b><i> text</i></p>
</body>Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.