About This HTML Issue
The word “stray” in this error message means the validator encountered a start tag in a place where no element of that kind is allowed according to the HTML specification. The <section> element is flow content, so it must appear inside the <body> element (or inside another element that accepts flow content, such as <main>, <article>, <div>, etc.). When the validator sees <section> somewhere it can’t legally exist, it flags it as “stray.”
There are several common causes for this error:
-
Content placed after
</body>or</html>: The most frequent cause. Extra markup exists beyond the closing tags of the document body. -
Premature closing of the
<body>: An extra or misplaced</body>tag earlier in the document causes the browser to consider the body closed, making any subsequent<section>stray. -
Nesting inside elements that don’t accept flow content: Placing
<section>directly inside a<p>,<span>,<a>, or other phrasing-content-only element. Since these elements can’t contain block-level flow content, the browser implicitly closes the parent, leaving<section>in an invalid position. -
Malformed or unclosed tags: Earlier syntax errors — like a missing closing
>on a tag — can shift the parser’s understanding of the document tree, causing downstream elements to appear stray.
This matters because browsers use error recovery when they encounter stray elements, and different browsers may handle the recovery differently. Your content could end up outside the visible document, be rendered inconsistently, or cause accessibility tools to misinterpret the page structure. Fixing this error ensures predictable rendering and a well-formed document.
Examples
Stray <section> after the closing </body> tag
This is the most common scenario. Content placed after </body> has nowhere valid to go:
<!-- ❌ Incorrect: section appears after </body> -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>Some content.</p>
</body>
<section>
<h2>About</h2>
<p>This section is stray.</p>
</section>
</html>
Move the <section> inside the <body>:
<!-- ✅ Correct: section is inside <body> -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>Some content.</p>
<section>
<h2>About</h2>
<p>This section is properly placed.</p>
</section>
</body>
</html>
Extra </body> tag causing a premature close
A duplicate closing tag can trick the parser into ending the body early:
<!-- ❌ Incorrect: extra </body> causes section to become stray -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<div>
<p>Main content.</p>
<!-- accidental extra closing tag -->
</div>
<section>
<h2>Updates</h2>
<p>This is now stray.</p>
</section>
</body>
</html>
Remove the extra </body> tag:
<!-- ✅ Correct: single </body> at the end -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
<div>
<p>Main content.</p>
</div>
<section>
<h2>Updates</h2>
<p>This is correctly placed now.</p>
</section>
</body>
</html>
Nesting <section> inside a <p> element
The <p> element only accepts phrasing content. When the parser encounters a <section> inside a <p>, it implicitly closes the <p> first, which can leave the <section> in an unexpected position:
<!-- ❌ Incorrect: section nested inside a paragraph -->
<p>
Introduction text.
<section>
<h2>Details</h2>
<p>More info here.</p>
</section>
</p>Separate the paragraph and section into siblings:
<!-- ✅ Correct: section is a sibling, not a child of <p> -->
<p>Introduction text.</p>
<section>
<h2>Details</h2>
<p>More info here.</p>
</section>Unclosed tag causing downstream errors
A missing closing angle bracket on an earlier element can corrupt the parser’s view of the entire document tree:
<!-- ❌ Incorrect: missing > on the </div causes parsing issues -->
<body>
<div>
<p>Content here.</p>
</div
<section>
<h2>Topics</h2>
<p>This may be flagged as stray.</p>
</section>
</body>Fix the malformed tag:
<!-- ✅ Correct: properly closed </div> -->
<body>
<div>
<p>Content here.</p>
</div>
<section>
<h2>Topics</h2>
<p>No longer stray.</p>
</section>
</body>How to debug this issue
-
Check the line number reported by the validator and look at what comes before the
<section>tag — the problem is usually above it, not at the<section>itself. -
Search for extra closing tags like
</body>,</html>, or</div>that might prematurely close a container. -
Verify parent elements — make sure
<section>isn’t nested inside<p>,<span>,<a>,<button>, or other elements that only accept phrasing content. - Use proper indentation to make the document hierarchy visually clear. Misplaced tags are much easier to spot in well-formatted code.
- Revalidate after each fix, since correcting one stray tag error often resolves multiple related warnings.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.