HTML Guides for tracking pixel
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.
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>.
Ready to validate your sites?
Start your free trial today.