Guias HTML para head
Aprenda como identificar e corrigir erros comuns de validação HTML sinalizados pelo W3C Validator — para que as suas páginas cumpram os padrões e sejam renderizadas corretamente em todos os navegadores. Consulte também o nosso Guias de acessibilidade.
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>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.
The <title> element is a required child of <head> according to the HTML specification. It defines the document’s title, which appears in the browser tab, is used as the default name when bookmarking the page, and is displayed as the clickable heading in search engine results. Omitting it violates the HTML standard and triggers this validation error.
Beyond standards compliance, the <title> element is critical for accessibility. Screen readers announce the page title when a user navigates to a new page or switches between tabs, giving them immediate context about where they are. A missing title forces assistive technology users to explore the page content to understand its purpose. Search engines also rely heavily on the <title> for indexing and ranking, so omitting it can hurt discoverability.
There are several common causes for this error:
- The <title> element is simply missing. This often happens in boilerplate code or quick prototypes where it’s overlooked.
- Duplicate <head> sections. If your HTML contains two <head> elements (for example, from a copy-paste error or a templating mistake), the validator may flag the second one as missing a <title>.
- The <title> is placed outside <head>. If the <title> element accidentally ends up in the <body> or before the <head>, the validator won’t count it as a child of <head>.
- The <title> is empty. While an empty <title> element (<title></title>) may not trigger this specific error, some validators will flag it separately. Always include descriptive text.
Examples
Missing <title> element
This triggers the validation error because the <head> has no <title>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome</h1>
</body>
</html><title> placed outside <head>
Here the <title> exists but is in the wrong location, so the <head> is still considered to be missing it:
<!DOCTYPE html>
<html lang="en">
<title>My Page</title>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome</h1>
</body>
</html>Duplicate <head> sections
A templating error or copy-paste mistake can introduce a second <head>, which lacks its own <title>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Welcome</h1>
</body>
</html>Correct usage
Place a single <title> element with descriptive text inside the <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome — My Website</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>Tips for a good <title>
- Keep it concise but descriptive — aim for roughly 50–60 characters.
- Make it unique for each page on your site. Avoid generic titles like “Untitled” or “Page”.
- Front-load the most important information. For example, Contact Us — My Company is more useful than My Company — Contact Us when users scan many browser tabs.
- Avoid duplicating the <h1> verbatim; the title should provide broader context (such as including the site name), while the <h1> focuses on page-specific content.
According to the HTML specification, <meta> elements are metadata content and must appear within the <head> element. When a <meta> tag appears between </head> and <body>, browsers have to error-correct by either ignoring the element or silently relocating it into the head. This can lead to unpredictable behavior — for instance, a <meta charset="utf-8"> tag in the wrong position might not be processed in time, causing character encoding issues. Similarly, a misplaced <meta name="viewport"> could fail to apply on some browsers, breaking your responsive layout.
There are several common causes for this error:
- A <meta> tag accidentally placed after </head> — perhaps added hastily or through a copy-paste error.
- A duplicate <head> section — if a second <head> block appears in the document, the browser closes the first one implicitly, leaving orphaned <meta> elements in limbo.
- An unclosed element inside <head> — a tag like an unclosed <link> or <script> can confuse the parser, causing it to implicitly close </head> earlier than expected, which pushes subsequent <meta> tags outside the head.
- Template or CMS injection — content management systems or templating engines sometimes inject <meta> tags at incorrect positions in the document.
To fix the issue, inspect your HTML source and ensure every <meta> element is inside a single, properly structured <head> section. Also verify that no elements within <head> are unclosed or malformed, as this can cause the parser to end the head section prematurely.
Examples
Incorrect — <meta> between </head> and <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="utf-8">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<p>Hello, world!</p>
</body>
</html>The <meta name="viewport"> tag is outside <head>, triggering the validation error.
Incorrect — duplicate <head> sections
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="utf-8">
</head>
<head>
<meta name="description" content="A sample page">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>The second <head> block is invalid. The browser ignores it, leaving the <meta name="description"> element stranded between </head> and <body>.
Incorrect — unclosed element forces early head closure
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<div>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>The <div> is not valid inside <head>, so the parser implicitly closes the head section when it encounters it. The subsequent <meta> tag ends up outside <head>.
Correct — all <meta> elements inside <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample page">
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>All <meta> elements are properly contained within a single <head> section. Note that <meta charset="utf-8"> should ideally be the very first element in <head> so the browser knows the encoding before processing any other content.
An HTML document must contain exactly one <head> element, and it must be the first child of the <html> element. The <head> element holds metadata like the document title, character encoding, stylesheets, and scripts. When the validator encounters a second <head> start tag, it means the document structure is broken — the browser has to guess how to interpret the malformed markup, which can lead to unpredictable behavior.
This error matters for several reasons. First, metadata inside a malformed <head> may not be processed correctly, which can affect SEO, character encoding, and stylesheet loading. Second, browsers may silently “fix” the issue in different ways, leading to inconsistent rendering. Third, malformed document structure can confuse assistive technologies like screen readers.
The most common causes of this error are:
- A missing forward slash in the closing tag — writing <head> instead of </head>. This is an easy typo to miss, especially in larger documents.
- Accidentally nesting a second <head> inside the first — this can happen during copy-paste operations or when merging code from multiple sources.
- Templating errors — when using a template engine, a partial or include might inject its own <head> tag into a document that already has one.
To fix the issue, search your HTML for every occurrence of <head and confirm that only one opening <head> tag exists and that the <head> section ends with a properly written </head> tag.
Examples
Missing forward slash on closing tag
This is the most common cause. The closing tag is written as <head> instead of </head>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<head>
<body>
<p>Hello world</p>
</body>
</html>Fixed — add the forward slash to properly close the <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>Nested <head> elements
A second <head> block is incorrectly nested inside the first:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<head>
<meta name="description" content="A test page">
</head>
</head>
<body>
<p>Hello world</p>
</body>
</html>Fixed — remove the inner <head> and </head> tags, keeping the metadata in the single <head> element:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta name="description" content="A test page">
</head>
<body>
<p>Hello world</p>
</body>
</html>Duplicate <head> from a template include
When working with template engines, an included partial might bring its own <head>, resulting in a duplicate:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<head>
<link rel="stylesheet" href="extra.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>Fixed — merge all metadata into a single <head> element:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<link rel="stylesheet" href="extra.css">
</head>
<body>
<p>Hello world</p>
</body>
</html>The <head> element is the container for document metadata — things like the <title>, <meta> tags, <link> elements, and <script> references. According to the HTML specification, the <head> must be the first child element of <html> and must appear exactly once. When the browser’s parser encounters a second <head> tag, or a <head> tag after the <body> has already opened, it treats it as a “stray” start tag because it violates the expected document structure.
This issue commonly arises in several situations:
- Duplicate <head> sections — often caused by copy-paste errors, template includes, or server-side rendering that injects a second <head> block.
- <head> placed inside <body> — this can happen when restructuring a page or when a component or partial template incorrectly includes its own <head>.
- Missing or misplaced closing tags — if you forget to close the <head> with </head> or accidentally close <html> early, subsequent tags may end up in unexpected positions.
This matters because browsers handle stray <head> tags inconsistently. Most modern browsers will silently ignore a second <head> and attempt to process its children as if they were part of <body>, which means your metadata (like <meta> charset declarations, stylesheets, or scripts) may not be recognized properly. This can lead to broken styling, encoding issues, missing SEO metadata, and unpredictable behavior across different browsers.
Examples
Duplicate <head> sections
A common mistake is having two <head> blocks in the same document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<head>
<meta name="description" content="My description">
</head>
<body>
<p>Hello world</p>
</body>
</html>The second <head> triggers the stray start tag error. Merge everything into a single <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta name="description" content="My description">
</head>
<body>
<p>Hello world</p>
</body>
</html><head> placed inside <body>
This often happens when a template partial or component includes its own <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<head>
<link rel="stylesheet" href="extra.css">
</head>
<p>Hello world</p>
</body>
</html>Move the metadata into the existing <head> section:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<link rel="stylesheet" href="extra.css">
</head>
<body>
<p>Hello world</p>
</body>
</html><head> appearing after <body>
Sometimes a <head> ends up after the closing </body> tag, particularly in dynamically assembled pages:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
<head>
<meta charset="utf-8">
</head>
</html>Again, the fix is to consolidate everything into the single, correctly placed <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>Tip for template-based systems
If you use a templating engine, static site generator, or CMS, check that only your base layout defines the <head> element. Partials and components should inject content into the existing <head> using the templating system’s block or slot mechanism, rather than wrapping their metadata in a new <head> tag. Search the final rendered HTML output for all occurrences of <head to verify there is only one.
Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.