HTML Validation

HTML Guides for noscript

Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.

Scan Your Site Free

Bad start tag in “iframe” in “noscript” in “head”.

The <noscript> element behaves differently depending on where it appears in a document. When placed inside the <head>, it can only contain <link>, <style>, and <meta> elements — strictly metadata content. When placed inside the <body>, it can contain any flow content, including <p>, <div>, <iframe>, and more. This distinction is defined in the WHATWG HTML Living Standard.

When the validator encounters an <iframe> inside a <noscript> in the <head>, it reports “Bad start tag” because the parser is operating under the <head> content model, where <iframe> is simply not a valid element. The browser may attempt error recovery by implicitly closing the <head> and opening the <body>, but this can lead to unexpected DOM structures and layout issues.

This pattern commonly appears when adding tracking or analytics snippets. For instance, Google Tag Manager provides a <noscript> fallback containing an <iframe>, and it’s meant to be placed immediately after the opening <body> tag — not in the <head>. Placing it in the wrong location breaks validation and may cause the tracking pixel to malfunction.

To fix the error, identify any <noscript> blocks in your <head> that contain non-metadata elements (like <iframe>, <p>, <div>, <img>, etc.) and move them into the <body>. If the <noscript> block only needs metadata elements like <meta> or <style>, it can remain in the <head>.

Examples

Invalid: iframe inside noscript in head

The <iframe> is not valid metadata content, so it cannot appear inside <noscript> within the <head>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>
    <noscript>
      <iframe src="https://example.com/tracking"></iframe>
    </noscript>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

Fixed: noscript with iframe moved to body

Moving the <noscript> block into the <body> resolves the error, since flow content is allowed there.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>
  </head>
  <body>
    <noscript>
      <iframe src="https://example.com/tracking"></iframe>
    </noscript>
    <h1>Welcome</h1>
  </body>
</html>

Valid: metadata-only noscript in head

A <noscript> block that contains only metadata elements is perfectly valid inside the <head>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>
    <noscript>
      <meta http-equiv="refresh" content="0; url=https://example.com/nojs">
      <style>
        .js-only { display: none; }
      </style>
    </noscript>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

Fixed: splitting a mixed noscript between head and body

If you need both metadata and flow content in your <noscript> fallback, use two separate <noscript> blocks — one in the <head> for metadata, and one in the <body> for visible content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My webpage</title>
    <noscript>
      <style>
        .js-only { display: none; }
      </style>
    </noscript>
  </head>
  <body>
    <noscript>
      <p>Please enable JavaScript to view this website.</p>
      <iframe src="https://example.com/tracking"></iframe>
    </noscript>
    <h1>Welcome</h1>
  </body>
</html>

Bad start tag in “img” in “noscript” in “head”.

The <noscript> element provides fallback content for users whose browsers don’t support scripting or have JavaScript disabled. When <noscript> appears inside <head>, the HTML specification restricts its contents to metadata elements only — specifically <link>, <style>, and <meta>. An <img> tag is flow content, not metadata content, so it is not permitted inside <head> regardless of whether it’s wrapped in <noscript>.

When <noscript> appears inside <body>, however, it can contain any flow content that would normally be valid at that position — including <img> elements. This is why the fix is simply to relocate the <noscript> block from the <head> to the <body>.

This issue is extremely common with third-party tracking pixels. Services like Facebook Pixel, LinkedIn Insight Tag, Google Tag Manager, and similar tools often instruct you to paste a <noscript> block containing a 1×1 tracking <img> directly after the opening <head> tag. While this works in browsers (they are forgiving with invalid HTML), it does not conform to the HTML specification and will trigger a validation error.

Beyond standards compliance, keeping your HTML valid ensures predictable behavior across all browsers and assistive technologies. Invalid markup can lead to unexpected DOM construction, which may cause subtle issues with CSS selectors, JavaScript DOM queries, or accessibility tools.

How to Fix It

Locate the <noscript> block that contains the <img> element inside your <head>.
Move that entire <noscript> block to somewhere inside the <body> — typically right after the opening <body> tag.
Keep any associated <script> tag in the <head> if desired; only the <noscript> with the <img> needs to move.

Examples

❌ Invalid: <img> inside <noscript> in <head>

This is the pattern commonly provided by third-party tracking pixel instructions:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <script>
      /* tracking script */
    </script>
    <noscript>
      <img src="https://example.com/pixel?id=123" height="1" width="1" alt="">
    </noscript>
  </head>
  <body>
    <h1>Welcome</h1>
  </body>
</html>

The validator reports “Bad start tag in img in noscript in head” because <img> is not valid metadata content.

✅ Valid: <noscript> with <img> moved to <body>

Move the <noscript> block into the <body> while leaving the <script> in the <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
    <script>
      /* tracking script */
    </script>
  </head>
  <body>
    <noscript>
      <img src="https://example.com/pixel?id=123" height="1" width="1" alt="">
    </noscript>
    <h1>Welcome</h1>
  </body>
</html>

The <img> is now inside <body> (via <noscript>), where flow content is permitted. The tracking pixel will still function correctly for users with JavaScript disabled.

✅ Valid: metadata-only <noscript> in <head>

If you only need metadata fallback content in the <head>, elements like <meta>, <link>, and <style> are allowed:

<head>
  <title>My Page</title>
  <noscript>
    <style>
      .js-only { display: none; }
    </style>
  </noscript>
</head>

This is valid because <style> is metadata content. Use this pattern when you need to apply fallback styles for non-JavaScript users, and reserve <noscript> blocks with <img> or other flow content for the <body>.

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

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>

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

Stray start tag “noscript”.

The “stray start tag” terminology means the HTML parser encountered a <noscript> element in a location where no element should exist. This typically happens when the tag appears between </head> and <body>, after </body>, after </html>, or when a preceding markup error has caused the parser to close the <body> prematurely, leaving the <noscript> orphaned outside any valid container.

According to the WHATWG HTML living standard, <noscript> is permitted in two contexts: inside <head> (where it can only contain <link>, <style>, and <meta> elements) and inside <body> as a flow content element (where it can contain any content normally allowed in its parent). When found anywhere else, the parser treats it as a “stray” tag because it has no valid parent to attach to.

This matters because stray elements lead to unpredictable behavior across browsers. While most browsers attempt error recovery, the resulting DOM may not match your intentions. The fallback content inside a stray <noscript> may be silently discarded or rendered incorrectly, defeating its purpose of providing an accessible experience for users without JavaScript.

A common cause is markup generated by third-party tools like analytics platforms or tag managers. These snippets often instruct you to paste a <noscript> tag “immediately after the opening <body> tag,” but if pasted in the wrong location — or if a templating system places it outside <body> — the error occurs.

Another frequent cause is unclosed elements earlier in the document. If a tag above the <noscript> is malformed, the parser may implicitly close the <body>, making subsequent elements stray. In these cases, fixing the earlier error resolves the <noscript> issue as well.

How to fix it

Ensure <noscript> is inside <head> or <body> — never between them, before <html>, or after </html>.
When inside <head>, only include <link>, <style>, or <meta> elements within it.
When inside <body>, use it like any other block-level element — it can contain paragraphs, divs, images, etc.
Check for unclosed tags above the <noscript> that might cause the parser to prematurely exit <body>.

Examples

Stray <noscript> after closing </body>

This is the most common scenario, often caused by pasting a tracking snippet in the wrong place:

<!-- ❌ Incorrect: noscript is outside body -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
  <noscript>
    <p>Please enable JavaScript.</p>
  </noscript>
</html>

Move it inside <body>:

<!-- ✅ Correct: noscript is inside body -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <noscript>
      <p>Please enable JavaScript.</p>
    </noscript>
  </body>
</html>

Stray <noscript> between </head> and <body>

<!-- ❌ Incorrect: noscript is between head and body -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <noscript>
    <iframe src="https://example.com/ns.html"></iframe>
  </noscript>
  <body>
    <p>Content here.</p>
  </body>
</html>

Place it at the top of <body> instead:

<!-- ✅ Correct: noscript is inside body -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Page</title>
  </head>
  <body>
    <noscript>
      <iframe src="https://example.com/ns.html" title="Tracking fallback"></iframe>
    </noscript>
    <p>Content here.</p>
  </body>
</html>

Using <noscript> inside <head>

When placed in <head>, <noscript> can only contain <link>, <style>, or <meta> elements — not block content like <p> or <iframe>:

<!-- ❌ Incorrect: p is not allowed in noscript inside head -->

<head>
  <title>My Page</title>
  <noscript>
    <p>Enable JavaScript!</p>
  </noscript>
</head>

Either use only permitted elements in <head>, or move the <noscript> to <body>:

<!-- ✅ Correct: style is allowed in noscript inside head -->

<head>
  <title>My Page</title>
  <noscript>
    <style>
      .js-only { display: none; }
      .nojs-message { display: block; }
    </style>
  </noscript>
</head>

Stray <noscript> caused by an unclosed element

Sometimes the real problem is an earlier unclosed tag. The parser implicitly closes <body>, making the <noscript> stray:

<!-- ❌ Incorrect: unclosed <div> causes parser confusion -->

<body>
  <div>
    <p>Some content</p>
<!-- missing </div> causes cascade of errors -->

  <noscript>
    <p>JavaScript is required.</p>
  </noscript>
</body>

Fix the unclosed element, and the <noscript> error resolves:

<!-- ✅ Correct: div is properly closed -->

<body>
  <div>
    <p>Some content</p>
  </div>
  <noscript>
    <p>JavaScript is required.</p>
  </noscript>
</body>

✓ HTML validation on every page

✓ Accessibility checks (WCAG / Axe)

✓ Scheduled automatic reports

✓ Up to 5,000 pages per report

From €19/month Compare plans →

Category: HTML Validation
Engine: W3C Validator
Total guides: 4

Browse by Tag

CSS a aria auto autocomplete bad bad value button charset css div doctype encoding end tag head heading height href html http-equiv id iframe img input label lang link meta name nesting noscript not allowed obsolete p role script section select sizes span src srcset start tag stray svg table td tel th tracking pixel type utf-8 video width xmlns

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial