HTML Guides for open elements
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
When the browser’s HTML parser reaches the end of the file, it expects all opened elements to have been closed. If they haven’t, the validator flags each unclosed element individually. While browsers will attempt to auto-close these elements using error recovery rules, the results can be unpredictable — different browsers may interpret the intended structure differently, leading to inconsistent rendering, broken layouts, and unexpected behavior.
This error is especially problematic for accessibility. Screen readers and other assistive technologies rely on a well-formed document tree to convey page structure to users. Unclosed elements can create a malformed DOM where content ends up nested inside the wrong parent, making navigation confusing or impossible for people using assistive devices.
There are several common causes for this error:
- Missing closing tags — Forgetting to write </div>, </section>, </p>, or similar end tags.
- Missing </body> or </html> — The document’s outermost structural tags are left unclosed, often because the bottom of the file was truncated or accidentally deleted.
- Mismatched nesting — Closing tags appear in the wrong order, which can cause the parser to treat elements as still open. For example, <b><i></b></i> closes <b> before <i>, leaving <i> effectively unclosed from the parser’s perspective.
- Typos in closing tags — Writing </dev> instead of </div>, which the parser doesn’t recognize as a valid closing tag for the open element.
- Template or build errors — Server-side templates, component frameworks, or build tools sometimes produce partial HTML output that is missing closing tags.
To fix this issue, work through your document methodically. Use your code editor’s bracket matching or tag highlighting features to pair each start tag with its end tag. Proper indentation makes this much easier — when nested elements are consistently indented, a missing closing tag becomes visually obvious because the indentation levels won’t line up.
Examples
Missing closing tags throughout the document
This document has multiple unclosed elements, including the structural <footer>, <body>, and <html> tags:
<!-- ❌ Triggers the error -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div>
<h1>Welcome to My Page
<p>This is a paragraph in a div.
</div>
<footer>
<p>Footer content hereThe validator will report open elements for <h1>, the <p> tags, <footer>, <body>, and <html>. Here is the corrected version:
<!-- ✅ All elements properly closed -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div>
<h1>Welcome to My Page</h1>
<p>This is a paragraph in a div.</p>
</div>
<footer>
<p>Footer content here</p>
</footer>
</body>
</html>Mismatched nesting order
Even when all closing tags are technically present, the wrong order can trigger this error:
<!-- ❌ Tags closed in the wrong order -->
<div>
<section>
<p>Some content</p>
</div>
</section>The </div> appears before </section>, but <section> is nested inside <div>. The parser closes <div> first, and because <section> was opened inside it, the explicit </section> that follows doesn’t match anything correctly. Fix this by closing elements in reverse order of how they were opened:
<!-- ✅ Correct nesting order -->
<div>
<section>
<p>Some content</p>
</section>
</div>Typo in a closing tag
A subtle typo can leave an element open without any obvious visual clue:
<!-- ❌ Typo: </setion> instead of </section> -->
<section>
<p>Article content</p>
</setion>The parser doesn’t recognize </setion> as the closing tag for <section>, so <section> remains open. Correct the spelling:
<!-- ✅ Properly spelled closing tag -->
<section>
<p>Article content</p>
</section>Void elements mistakenly given closing tags that disrupt nesting
Sometimes adding a closing tag to a void element like <input> or <br> can confuse the parser and cause downstream nesting issues. Void elements must not have closing tags:
<!-- ❌ Closing tag on a void element can cause confusion -->
<div>
<input type="text"></input>
</div><!-- ✅ Void elements are self-closing; no end tag needed -->
<div>
<input type="text">
</div>Tips for preventing this issue
- Indent consistently — Use two or four spaces for each nesting level. When every child element is indented one level deeper than its parent, missing closing tags become easy to spot.
- Use editor features — Most code editors offer tag auto-closing, bracket matching, and tag pair highlighting. Enable these to catch mistakes as you type.
- Validate early and often — Run your HTML through the W3C validator during development, not just at the end. This catches unclosed elements before they cascade into dozens of related errors.
- Check complex structures carefully — Tables, forms, nested lists, and multi-level layouts have many nested elements. These are the most common places where a closing tag gets accidentally omitted or misplaced.
- Review template output — If you use server-side templates or a JavaScript framework that generates HTML, validate the rendered output, not just the source template. Conditional logic in templates is a frequent source of missing closing tags.
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.
Ready to validate your sites?
Start your free trial today.