Verificação HTML: Bad start tag in “p” in “noscript” in “head”.

Sobre este problema HTML

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:

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

<!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:

<!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>:

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

<!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>:

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