# @next/next/no-head-element

> Disallow the `<head>` element in favor of `Head` from `next/head`

In the Pages Router, Next.js writes the document's `<head>` itself. A `<head>` element in a page or a component is rendered inside the `<body>`, where it isn't valid HTML. The `Head` component from `next/head` moves its children into the real `<head>`.

Files under an `app/` directory aren't checked. In the App Router, the root layout can have a `<head>`.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"@next/next/no-head-element" = "error" # or "warn"
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad {"filename": "pages/about.jsx"} */}
```jsx
export default function About() {
  return (
    <div>
      <head>
        <title>About us</title>
      </head>
      <h1>About us</h1>
    </div>
  );
}
```

Not reported:

{/* good {"filename": "pages/about.jsx"} */}
```jsx
import Head from "next/head";

export default function About() {
  return (
    <div>
      <Head>
        <title>About us</title>
      </Head>
      <h1>About us</h1>
    </div>
  );
}
```

{/* good {"filename": "app/layout.jsx"} */}
```jsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/favicon.ico" />
      </head>
      <body>{children}</body>
    </html>
  );
}
```