HTML Guide
An end tag </em> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:
<!-- This line is incorrect as the <em> tag was closed before the nested <a> tag -->
<em><a href="#">link</em></a>
<!-- This line is OK as every end tag respects the nesting rules -->
<em><a href="#">link</a></em>A closing </body> tag has been found, but there are unclosed elements before it. For example this has an unclosed <section> element:
<body>
<section>
</body>End tags in HTML must not have any attributes.
According to the HTML specification, only start tags (also called opening tags) may contain attributes, while end tags must appear as a plain </tagname> with nothing else.
For example, this is invalid and will trigger the error:
<p>Welcome to the site.</p class="welcome">Correct code removes the attribute from the end tag:
<p>Welcome to the site.</p>If you need the element to have an attribute, only include it in the start tag:
<p class="welcome">Welcome to the site.</p>End tag “i” violates nesting rules because the closing </i> does not match the most recently opened still-unclosed inline element, causing mis-nested tags.
HTML requires elements to be properly nested in a stack-like order: last opened, first closed. Inline elements like the i element (for idiomatic text), em, strong, a, and span must not overlap. When you open i and then open b, you must close b before closing i. Mis-nesting often happens around links or emphasis tags, e.g., i inside a but closed outside. The i element is purely presentational/idiomatic; consider em for emphasis or CSS with font-style: italic;, but whichever you use, keep the nesting consistent.
Common patterns that trigger the error:
- Overlapping inline elements: i … b … </i> … </b>
- Closing order mismatch across a, span, em, strong, i
- Copy/paste around icons or screen-reader text
Fix by reordering the tags so they close in reverse order of opening, or by merging styles into one element to avoid overlaps.
HTML Examples
Incorrect (reproduces the validator error)
<p>
<a href="/about"><i>About <strong>Us</i></strong></a>
</p>Correct (properly nested)
<p>
<a href="/about"><i>About <strong>Us</strong></i></a>
</p>A closing tag </li> has been found, but there were open elements nested inside the <li>. You need to close the nested elements before you close the <li>.
A closing tag </li> has been found, but there were open elements nested inside the <li>. You need to close the nested elements before you close the <li>.
For example:
<li>
<span>example
</li>The above is invalid because you need to close the <span> tag before you close the <li>.
This would be valid:
<li>
<span>example</span>
</li>An end tag </strong> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:
<!-- This line is incorrect as the <strong> tag was closed before the nested <a> tag -->
<strong><a href="#">link</strong></a>
<!-- This line is OK as every end tag respects the nesting rules -->
<strong><a href="#">link</a></strong>And end tag has been found that does not match the current open element. Check the context to fix the start and end tags.
An end tag has been implied from the context, but there were open elements. Check other issues in the same document for open tags that need to be closed.
For example, the following will raise a “end tag li implied” issue, because the span element inside the li has not been properly closed.
<ul>
<li><span>text<li>
</ul>Instead, this is correct:
<ul>
<li><span>text</span><li>
</ul>Your HTML markup contains an end tag for X, but there are nested open elements that need to be closed first. For example, <li><span>example</li> is invalid because you need to close the <span> tag before you close the <li>. This would be valid: <li><span>example</span></li>.
A character has been found in the document that is not allowed in the charset encoding being used.
“Garbage after </” means a stray less-than slash is followed by text that doesn’t form a valid end tag.
This happens when the parser encounters </ that isn’t the start of a proper end tag. Valid end tags must be </tagname> where tagname is a known HTML tag, case-insensitive, with no spaces before the closing >. Common causes include typos (</ div>), accidental text like </-- or </br>, unescaped markup in text (you meant to show </div> as text), or leftover characters after a correct end tag (e.g., </p>foo where foo wasn’t intended). If you need to display literal markup, escape it using character references: </div>. Also ensure custom element names follow the hyphen rule (e.g., my-widget) and that you don’t “close” void elements like br, img, or input, which must not have end tags.
HTML Examples
Reproducing the issue
<!doctype html>
<html lang="en">
<head>
<title>Garbage after...</</title>
</head>
<body>
<p>This paragraph has a bad closing tag.</ p>
</body>
</html>Fixing the issue
<!doctype html>
<html lang="en">
<head>
<title>Garbage after...</</title>
</head>
<body>
<p>Everything is fine now.</p>
</body>
</html>A heading element (h1, h2, h3, etc.) can’t be nested inside another heading element.
Here’s an example of invalid HTML code:
<h1>Main heading
<h2>Sub heading</h2>
</h1>To fix this issue, you should ensure that each heading element is properly nested within the document hierarchy. Headings should only be used to indicate the structure of your content, not to style it.
Here’s an example of valid HTML code that properly uses heading elements:
<main>
<h1>Main heading</h1>
<section>
<h2>Section heading</h2>
<p>Paragraph content</p>
</section>
</main>In this example, the heading elements are used to denote the structure of the document, with the h1 element indicating the highest level heading and the h2 element indicating a subheading within a section. Notice that in the valid example, each heading element is only used once and is not nested within another heading element.
Some times this can be caused by a typo in the end tag for a heading, for example:
<h3>Meet the Feebles<h3>In order to fix this issue, the end tag should be </h3> in the example above.
An img tag placed inside an SVG or MathML element creates a namespace error because img is an HTML element, not an SVG or MathML element.
SVG and MathML use their own XML-based namespaces, and HTML elements like img cannot be directly inserted inside them. To include raster images within SVG, the SVG image element should be used instead, and external math images must be handled outside MathML.
Explanation:
- The HTML img element is only allowed in the HTML namespace.
- Placing <img> inside an <svg> or <math> tag triggers a namespace conflict, as img is not a valid child of these elements.
- The SVG standard provides the <image> element for embedding bitmap images within SVG.
Incorrect:
<svg width="100" height="100">
<img src="picture.png" alt="Example" width="100" height="100">
</svg>Correct:
<svg width="100" height="100">
<image href="picture.png" x="0" y="0" width="100" height="100" />
</svg>Use the SVG image element instead of HTML img whenever embedding images inside SVG.
HTTP status code 202 means the server has accepted the request but has not completed processing it, so the validator cannot retrieve the resource.
The W3C HTML Validator needs to retrieve external resources (like linked CSS or JS files, images, or even your webpage itself) and expects a successful 200 OK HTTP status code. If it gets a 202 Accepted instead, the resource is not fully available for validation, which prevents it from fetching and checking the content.
Causes:
- Your server is responding with a 202 Accepted and processing in the background instead of serving the full content immediately.
- You might be testing a URL that triggers background processing, a queue, or is incomplete.
- If your resource is an API or dynamic endpoint, make sure to provide a static, direct file with a 200 OK response for validation.
How to fix:
- Configure your server to respond with 200 OK and immediately provide the requested content for HTML documents or resources.
- Avoid validating URLs that return 202 Accepted. Only validate URLs serving complete resources.
The validator is blocked from accessing an external resource such as a stylesheet, script, or image due to a 403 (Forbidden) HTTP status.
This means that the HTML references a resource (often in a link, script, img, or iframe element) at a URL that is denying access—possibly due to server permissions, IP restrictions, or hotlink protection. The validator needs to retrieve these resources to check them, so HTTP 403 errors will prevent validation of external resources.
The “HTTP resource not retrievable” error with an HTTP status code of 404 indicates that the W3C Validator could not find a specific web page by its URL. This error occurs when the URL provided for a page is incorrect, or the page no longer exists at the given address.
The “HTTP resource not retrievable” error with an HTTP status code of 429 indicates that the W3C Validator was temporarily blocked from accessing a specific URL because the remote server is rate-limiting incoming requests. This typically happens when too many requests are made in a short period of time.
To resolve this:
- Try checking the site at a lower speed, or less often.
- If you’re the server owner, check your server or CDN settings for rate-limiting rules that might be too aggressive.
This error is usually temporary. Waiting before retrying can often resolve the issue.
HTTP status code 502 means the validator could not reach your resource because of a “Bad Gateway” error.
This error occurs outside of your HTML code—it indicates a problem with the communication between servers, not with the markup. The validator cannot retrieve your HTML page because your site, web host, or proxy between the validator and your server returned a 502 response, possibly due to server overload, misconfiguration, or a temporary networking issue.
To address this:
- Ensure your website is online and publicly accessible.
- Check your server or hosting provider for outages or firewall/redirect settings.
- Confirm there are no restrictions (like IP blocking or authentication requirements) preventing external access.
- Wait for temporary outages to resolve, or contact your hosting support if the error persists.
The “HTTP resource not retrievable” error with an HTTP status code of 503 indicates that the W3C Validator could not access a web page referenced in your HTML. This error occurs when the remote server hosting the page is temporarily unavailable or overloaded.
A 504 HTTP status error means the validator was unable to retrieve your HTML document due to a server timeout, not because of any syntactic issue in your HTML.
The W3C Validator retrieves your page over HTTP(S) to check its HTML; a 504 (“Gateway Timeout”) indicates the server did not respond in time. This can be caused by server configuration, network problems, or firewall/restriction policies.
To resolve, check if your website is publicly accessible, loads quickly for external visitors, and isn’t blocking the validator’s requests. If your website requires authentication, is on a private network, or restricts certain IPs, external tools like W3C’s validator won’t be able to access it.
For persistent network errors, consult your web hosting provider or server administrator to resolve connectivity issues.
The character encoding declared in the HTML differs from the actual file encoding.
The meta element with charset="utf-8" tells browsers to interpret the document as UTF-8. However, if the file is actually saved in another encoding (such as Windows-1252), validators and browsers will detect a mismatch, leading to this error. To resolve this, you must ensure the file contents and the encoding declaration match.
Recommended: Save your document in UTF-8 encoding to match your meta tag.
Alternatively, if you must use Windows-1252, update charset accordingly.
UTF-8 example (preferred):
<!DOCTYPE html>
<html lang="en">
<head>
<title>UTF-8 Encoding Example</title>
<meta charset="utf-8">
</head>
<body>
<p>This page is encoded in UTF-8.</p>
</body>
</html>Windows-1252 example (not recommended):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Windows-1252 Encoding Example</title>
<meta charset="windows-1252">
</head>
<body>
<p>This page is encoded in Windows-1252.</p>
</body>
</html>Summary:
- Use UTF-8 as your file encoding and declare <meta charset="utf-8">.
- Always make sure the file is saved using the same encoding you declare in the HTML.
The document has been declared to use a windows-1251 charset but the actual contents seems to be utf-8. You should update the charset to that like in this example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">The label element may only contain one labelable descendant.
For example:
<label for="age">
Age
<select id="age">
<option>young</option>
<option>old</option>
</select>
</label>In HTML5 you’re encouraged to use Unicode (UTF-8) character encoding rather than a legacy character encoding such as Latin1 (Windows-1252 or ISO 8859-1).
In short, it can be just a matter of using <meta charset="utf-8"/> in your document, but you should also ensure that your pages are also saved and served as UTF-8.
The document could not be properly parsed due to malformed characters. Check the document encoding.