# “meta” element between “head” and “body”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/meta-element-between-head-and-body
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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>`

```html
<!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

```html
<!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

```html
<!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>`

```html
<!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.
