About This HTML Issue
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.
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.