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

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

A `<style>` element sits between the closing `</head>` tag and the opening `<body>` tag, where the HTML parser doesn't expect any elements.

After `</head>`, the parser expects the `<body>` start tag, with nothing but whitespace or comments before it. When it finds a `<style>` there, browsers put the element back into the `<head>` and still apply its CSS, so the page usually looks right. The markup is still invalid. A theme or plugin that prints inline CSS right after `</head>` is a common cause.

The validator treats this error as fatal. Right after it, the report shows "Cannot recover after last error. Any further errors will be ignored." and nothing later in the page gets checked. Other HTML problems below this point stay hidden until you fix it.

To fix it, move the `<style>` element inside the `<head>`, before `</head>`. Since October 2026, the HTML standard also allows a `<style>` element in the `<body>`, but only as the first child of its parent and with its rules wrapped in `@scope`, which limits them to that part of the page. For styles that apply to the whole page, the `<head>` is the right place.

## Invalid example

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
  </head>
  <style>
    p {
      color: navy;
    }
  </style>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
```

## Valid example

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My page</title>
    <style>
      p {
        color: navy;
      }
    </style>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
```
