HTML Guides for body
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.
The <meta> element is most commonly used inside the <head> section to define metadata like character encoding, viewport settings, or descriptions. Inside <head>, attributes like charset, http-equiv, and name are perfectly valid. However, the HTML specification also allows <meta> to appear inside the <body> — but only under specific conditions.
When a <meta> element appears in the <body>, it must have either an itemprop attribute (for microdata) or a property attribute (for RDFa). It must also have a content attribute. Additionally, it cannot use http-equiv, charset, or name attributes in this context. These rules exist because the only valid reason to place a <meta> tag in the <body> is to embed machine-readable metadata as part of a structured data annotation — not to define document-level metadata.
Why this matters
- Standards compliance: The HTML living standard explicitly restricts which attributes <meta> can use depending on its placement. Violating this produces invalid HTML.
- Browser behavior: Browsers may ignore or misinterpret <meta> elements that appear in the <body> without proper attributes. For example, a <meta http-equiv="content-type"> tag inside the <body> will have no effect on character encoding, since that must be determined before the body is parsed.
- SEO and structured data: Search engines rely on correctly structured microdata and RDFa. A <meta> element in the body without itemprop or property won’t contribute to any structured data and serves no useful purpose.
Common causes
- Misplaced <meta> tags: A <meta> element meant for the <head> (such as <meta http-equiv="..."> or <meta name="description">) has accidentally been placed inside the <body>. This can happen due to an unclosed <head> tag, a CMS inserting tags in the wrong location, or simply copying markup into the wrong section.
- Missing itemprop or property: A <meta> element inside the <body> is being used for structured data but is missing the required itemprop or property attribute.
Examples
Incorrect: <meta> with http-equiv inside the <body>
This <meta> tag belongs in the <head>, not the <body>:
<body>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
<input type="text" name="q">
</form>
</body>
Fixed: Move the <meta> to the <head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>My Page</title>
</head>
<body>
<form>
<input type="text" name="q">
</form>
</body>
Incorrect: <meta> in the <body> without itemprop or property
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">9.99</span>
<meta content="USD">
</div>
The <meta> element is missing the itemprop attribute, so the validator reports the error.
Fixed: Add the itemprop attribute
<div itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">9.99</span>
<meta itemprop="priceCurrency" content="USD">
</div>
Correct: Using property for RDFa
The property attribute is also valid for <meta> elements in the <body> when using RDFa:
<div vocab="https://schema.org/" typeof="Event">
<span property="name">Concert</span>
<meta property="startDate" content="2025-08-15T19:00">
</div>
Incorrect: <meta name="..."> inside the <body>
The name attribute is only valid on <meta> elements inside the <head>:
<body>
<meta name="author" content="Jane Doe">
<p>Welcome to my site.</p>
</body>
Fixed: Move it to the <head>
<head>
<title>My Site</title>
<meta name="author" content="Jane Doe">
</head>
<body>
<p>Welcome to my site.</p>
</body>
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>
According to the HTML specification, <meta> elements are metadata content and must appear within the <head> element. When a <meta> tag appears between </head> and <body>, browsers have to error-correct by either ignoring the element or silently relocating it into the head. This can lead to unpredictable behavior — for instance, a <meta charset="utf-8"> tag in the wrong position might not be processed in time, causing character encoding issues. Similarly, a misplaced <meta name="viewport"> could fail to apply on some browsers, breaking your responsive layout.
There are several common causes for this error:
- A <meta> tag accidentally placed after </head> — perhaps added hastily or through a copy-paste error.
- A duplicate <head> section — if a second <head> block appears in the document, the browser closes the first one implicitly, leaving orphaned <meta> elements in limbo.
- An unclosed element inside <head> — a tag like an unclosed <link> or <script> can confuse the parser, causing it to implicitly close </head> earlier than expected, which pushes subsequent <meta> tags outside the head.
- Template or CMS injection — content management systems or templating engines sometimes inject <meta> tags at incorrect positions in the document.
To fix the issue, inspect your HTML source and ensure every <meta> element is inside a single, properly structured <head> section. Also verify that no elements within <head> are unclosed or malformed, as this can cause the parser to end the head section prematurely.
Examples
Incorrect — <meta> between </head> and <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="utf-8">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<p>Hello, world!</p>
</body>
</html>
The <meta name="viewport"> tag is outside <head>, triggering the validation error.
Incorrect — duplicate <head> sections
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="utf-8">
</head>
<head>
<meta name="description" content="A sample page">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The second <head> block is invalid. The browser ignores it, leaving the <meta name="description"> element stranded between </head> and <body>.
Incorrect — unclosed element forces early head closure
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
The <div> is not valid inside <head>, so the parser implicitly closes the head section when it encounters it. The subsequent <meta> tag ends up outside <head>.
Correct — all <meta> elements inside <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample page">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
All <meta> elements are properly contained within a single <head> section. Note that <meta charset="utf-8"> should ideally be the very first element in <head> so the browser knows the encoding before processing any other content.
Placing text or non-space characters between the </body> and </html> tags is not allowed.
According to the HTML specification, the </body> tag must be immediately followed by either whitespace (spaces, tabs, newlines) or the closing </html> tag, with no visible content or other characters, as the body of the document must end before </body>. Any characters appearing after </body> are considered outside the document body and violate W3C compliance.
Invalid example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
Content goes here.
</body> this is invalid
</html>
Valid example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
</head>
<body>
Content goes here.
</body>
</html>
Ensure that nothing except optional whitespace appears after </body> and before </html> to resolve this validation issue.
Every valid HTML document follows a strict structure: a <!DOCTYPE html> declaration, followed by an <html> element containing exactly two children — <head> and <body>. All visible content and its associated markup must live inside <body>. Once the browser encounters the </body> closing tag, it expects nothing else except the closing </html> tag.
When an end tag appears after </body> has been closed, the browser’s parser enters an error-recovery mode. While most browsers will attempt to handle this gracefully, the behavior is not guaranteed to be consistent. This can lead to unexpected DOM structures, which may cause issues with JavaScript that relies on the DOM tree, break CSS styling, or create accessibility problems for screen readers that depend on proper document structure.
This issue commonly arises from:
- Extra or duplicate closing tags — for example, an extra </div> that doesn’t match any open element inside <body>.
- Accidentally placing elements after </body> — such as moving a <script> or </div> outside the body during editing.
- Copy-paste errors — fragments of markup pasted in the wrong location.
- Template or CMS issues — server-side templates that inject closing tags in the wrong order.
To fix this, review your document structure carefully. Make sure every opening tag inside <body> has a matching closing tag also inside <body>. Ensure nothing appears between </body> and </html> except whitespace.
Examples
Incorrect — end tag after body is closed
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<div>
<p>Hello world</p>
</div>
</body>
</div>
</html>
Here, an extra </div> sits between </body> and </html>. This triggers the validation error because the body has already been closed when the parser encounters </div>.
Incorrect — script tag placed after body
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
<script src="app.js"></script>
</html>
While browsers will typically still execute the script, placing it after </body> is invalid and produces this warning.
Correct — all content and tags inside body
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<div>
<p>Hello world</p>
</div>
<script src="app.js"></script>
</body>
</html>
All elements, including <script> tags, are properly nested inside the <body> element. The only thing that follows </body> is </html>.
Debugging tip
If your document is large and you’re having trouble finding the stray tag, try these approaches:
- Count your tags — make sure every opening tag (like <div>) has exactly one matching </div> inside <body>.
- Use an editor with bracket matching — most code editors can highlight matching open/close tags, making orphaned tags easy to spot.
- Check the validator’s line number — the W3C validator reports the line where the stray end tag was found, which points you directly to the problem.
- Indent properly — consistent indentation makes structural problems visually obvious.
An HTML document must have exactly one <body> element. According to the HTML specification, the <body> element represents the content of the document and must appear as the second child of the <html> element, right after <head>. When the browser’s parser encounters content that belongs in the body before seeing an explicit <body> tag, it implicitly opens one. If a <body> tag then appears later in the markup, the parser sees it as a duplicate—hence the error “an element of the same type was already open.”
There are several common causes for this error:
- Duplicate <body> tags: A second <body> tag was accidentally typed or left behind after editing or merging templates.
- Content between </head> and <body>: Placing visible content (like text, <div>, or <script> with content) between the closing </head> tag and the opening <body> tag causes the parser to implicitly open the body, making your explicit <body> tag a duplicate.
- Template or include issues: When using server-side includes, CMS templates, or JavaScript-based frameworks that inject partial HTML, multiple <body> tags can end up in the final rendered output.
- Misplaced elements inside <head>: Placing elements that aren’t valid inside <head> (such as <div>, <p>, or <img>) will cause the parser to implicitly close the <head> and open the <body> before you intended.
This matters because a malformed document structure can lead to unpredictable rendering across browsers. While modern browsers are forgiving and will attempt to recover, the implicit body opening may cause elements you intended to be in the <head> (like <meta> or <link> tags placed after the stray content) to end up in the body instead, where they have no effect. This can break stylesheets, SEO metadata, and other head-level functionality. Screen readers and other assistive technologies also rely on correct document structure.
To fix the issue, inspect your full HTML output (not just your templates individually) and make sure there is only one <body> tag. Verify that no visible content or body-level elements appear before it, and that nothing invalid is lurking inside <head>.
Examples
Duplicate <body> tag
This triggers the error because two <body> tags are present:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
<body>
<p>More content</p>
</body>
</html>
Fixed — combine everything into a single <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>More content</p>
</body>
</html>
Content placed between </head> and <body>
The stray <div> between </head> and <body> implicitly opens the body, making the explicit <body> tag a duplicate:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<div id="banner">Hello</div>
<body>
<p>Main content</p>
</body>
</html>
Fixed — move the <div> inside <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<div id="banner">Hello</div>
<p>Main content</p>
</body>
</html>
Invalid element inside <head>
Placing a <div> inside <head> forces the parser to implicitly open <body>, so the actual <body> tag becomes a duplicate. This also means the <link> tag ends up in the body where it may not work as intended:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<div>Oops</div>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Content</p>
</body>
</html>
Fixed — remove the <div> from <head> and place it in <body>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Oops</div>
<p>Content</p>
</body>
</html>
Ready to validate your sites?
Start your free trial today.