About This HTML Issue
The HTML parser follows strict rules about where elements can appear. When it encounters a <div> in an unexpected location, it reports it as a “stray” start tag. The parser may attempt error recovery — often by ignoring the tag or moving it — but the resulting DOM tree may not match your intentions, leading to broken layouts or missing content.
There are several common causes of this error:
Placement after </body> or </html>: All visible content must live inside the <body> element. Any <div> appearing after </body> or </html> is stray because the document structure has already been closed.
Inside elements with restricted content models: Elements like <table>, <ul>, <ol>, and <select> only permit specific child elements. A <div> placed directly inside a <table> (outside of <thead>, <tbody>, <tfoot>, <tr>, <td>, or <th>) or directly inside a <ul> (which only allows <li> children) will trigger this error.
Missing closing tags: If you forget to close an element like </td>, </li>, or </p>, the parser may implicitly close it at a point that leaves your <div> orphaned in an invalid context. This is one of the trickiest causes because the <div> itself looks fine — the real problem is elsewhere.
Why this matters: Beyond standards compliance, a stray element can cause browsers to construct an unexpected DOM. This may break CSS layouts, cause JavaScript selectors to fail, and create accessibility issues where assistive technologies misinterpret the page structure.
Examples
Stray <div> after the closing </html> tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<p>Main content</p>
</body>
</html>
<div>
Some extra content
</div>
The <div> appears after the document has been fully closed. Move it inside <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<p>Main content</p>
<div>
Some extra content
</div>
</body>
</html>
Stray <div> inside a <table>
<table>
<div class="wrapper">
<tr>
<td>Data</td>
</tr>
</div>
</table>
A <table> does not allow <div> as a direct child. Remove the <div> or restructure:
<div class="wrapper">
<table>
<tr>
<td>Data</td>
</tr>
</table>
</div>
Stray <div> inside a <ul>
<ul>
<div class="group">
<li>Item 1</li>
<li>Item 2</li>
</div>
</ul>
A <ul> only accepts <li> elements as direct children. Place the <div> inside each <li>, or wrap the entire list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Stray <div> caused by a missing closing tag
<table>
<tr>
<td>Cell content
</tr>
</table>
<div>More content</div>
The missing </td> can cause parser confusion that makes the <div> appear stray in some contexts. Always close your tags explicitly:
<table>
<tr>
<td>Cell content</td>
</tr>
</table>
<div>More content</div>How to debug
If the error location isn’t obvious, work through these steps:
-
Check the line number reported by the validator and look at what element the
<div>is nested inside. -
Look for missing closing tags above the flagged line — a missing
</td>,</li>,</div>, or</p>is often the real culprit. -
Verify the parent element’s content model — check whether that parent is allowed to contain a
<div>by consulting the MDN element reference. -
Use your browser’s DevTools to inspect the actual DOM. If the browser moved or removed your
<div>, the DOM tree will differ from your source HTML, helping you spot where the parser lost sync.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.
Learn more: