# Bad start tag in “p” in “noscript” in “head”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-start-tag-in-p-in-noscript-in-head
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines two distinct content models for the `<noscript>` element based on its location in the document. When `<noscript>` appears inside `<head>`, it inherits the restrictions of the `<head>` element itself — only metadata content is permitted. This means elements like `<link>`, `<style>`, and `<meta>` are allowed, but flow content like `<p>`, `<div>`, `<h1>`, or any other body-level element is not. When `<noscript>` appears inside `<body>`, it follows the more permissive rules of flow content and can contain paragraphs, headings, and other visible elements.

This distinction exists because the `<head>` section is strictly reserved for metadata that describes the document — it is never rendered as visible page content. Placing a `<p>` tag inside a `<noscript>` in `<head>` violates this principle. Browsers may handle this inconsistently: some might silently ignore the invalid content, while others might force the `<head>` to close prematurely and push the content into the `<body>`, causing unexpected layout issues and potentially disrupting other metadata elements that follow.

This is also an accessibility concern. Screen readers and other assistive technologies rely on a well-structured document where the `<head>` contains only metadata and all visible content lives in the `<body>`. Invalid nesting can confuse these tools and lead to content being skipped or misinterpreted.

## How to Fix It

You have two main approaches:

1. **Keep `<noscript>` in `<head>` but use only metadata elements.** This is ideal when you need to load a fallback stylesheet or add a `<meta>` redirect for users without JavaScript.

2. **Move the `<noscript>` block into `<body>`** if you need to display visible text or other flow content to the user.

## Examples

### ❌ Incorrect: Flow content inside `<noscript>` in `<head>`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <noscript>
      <p>JavaScript is disabled.</p>
    </noscript>
  </head>
  <body>
  </body>
</html>
```

The `<p>` element is flow content and is not allowed inside `<noscript>` when it sits within `<head>`.

### ✅ Correct: Metadata-only `<noscript>` in `<head>`

If your goal is to provide a fallback stylesheet or redirect when JavaScript is unavailable, use only metadata elements:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <noscript>
      <link rel="stylesheet" href="no-js-fallback.css">
    </noscript>
  </head>
  <body>
  </body>
</html>
```

You can also use `<style>` or `<meta>` inside the `<noscript>` in `<head>`:

```html
<head>
  <title>Example</title>
  <noscript>
    <style>
      .js-only { display: none; }
      .no-js-message { display: block; }
    </style>
  </noscript>
</head>
```

### ✅ Correct: Textual fallback in `<noscript>` inside `<body>`

When you need to show a visible message to users who have JavaScript disabled, place the `<noscript>` block in the `<body>`:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
  </head>
  <body>
    <noscript>
      <p>This site requires JavaScript to function properly. Please enable JavaScript in your browser settings.</p>
    </noscript>
  </body>
</html>
```

### ✅ Correct: Combining both approaches

For a comprehensive fallback strategy, you can use `<noscript>` in both locations — metadata in `<head>` and visible content in `<body>`:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example</title>
    <noscript>
      <link rel="stylesheet" href="no-js-fallback.css">
    </noscript>
  </head>
  <body>
    <noscript>
      <p>JavaScript is disabled. Some features may not be available.</p>
    </noscript>
  </body>
</html>
```

This gives you the best of both worlds: styling adjustments via the `<head>` fallback and a user-facing message via the `<body>` fallback.
