HTML Guide
An HTML tag could not be parsed, most probably because of a typo.
Last reviewed: October 27, 2022
Related W3C validator issues
The issue here is related to the encoding of URLs. In HTML and URLs, special characters that have specific meanings need to be encoded to ensure that the URL is interpreted correctly. This process converts characters to their percent-encoded form, where a character is replaced by % followed by two hexadecimal digits representing the ASCII code of the character.
Explanation:
- The action attribute of a <form> element specifies where to send the form-data when a form is submitted.
- If the URL contains special characters (e.g., spaces, <, >, #, %, etc.), they need to be percent-encoded. For instance, a space character is encoded as %20.
- In this case, the validator is complaining about a % sign that is not correctly followed by two hexadecimal digits, which typically happens if the URL was not properly encoded.
How to Fix:
- Check the URL: Look for any raw special characters that need encoding.
- Correctly Encode the URL: Use online tools or libraries that provide URL encoding support to ensure that the URL is correctly percent-encoded.
Example:
Suppose you have the following incorrect form tag:
<form action="submit%data.html">
<!-- form elements here -->
</form>The % in submit%data.html should be followed by two hexadecimal digits. If %data was intended to be a part of the URL, it should be encoded properly. Here is how to correct it:
<form action="submit%25data.html">
<!-- form elements here -->
</form>If % should represent data, replace % with %25, which is the percent-encoded form of %. Always verify each special character is correctly encoded. Using this approach ensures that the URL in the action attribute is valid according to HTML standards.
The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
Square brackets ([, ]) are not allowed unescaped in the query part of an href URL value.
The href attribute in the <a> element must contain a valid URL. According to the URL standard, certain characters, including square brackets, are not permitted directly in the query component unless percent-encoded. Using unescaped square brackets in the URL can cause validation errors and unexpected behavior in browsers.
To include a square bracket in the query string, use percent encoding:
- [ encodes to %5B
- ] encodes to %5D
Incorrect usage:
<a href="search.html?q=[value]">Search</a>Correct usage:
<a href="search.html?q=%5Bvalue%5D">Search</a>This ensures the URL is valid and compliant with HTML standards.
The href attribute of the a element contains an invalid backslash character, which is not permitted in URLs.
According to the WHATWG HTML living standard, the href attribute must contain a valid URL. URLs use forward slashes (/) for path separators, and backslashes are not allowed as they can cause browsers and validators to misinterpret the address. Backslashes often arise when file paths are copied from Windows environments.
Correct Usage:
- Always use forward slashes / in your URLs.
- Remove any backslashes from href values.
Example of incorrect usage:
<a href="images\picture.jpg">View Picture</a>Corrected example:
<a href="images/picture.jpg">View Picture</a>An illegal character has been found for the “href” attribute on the “link” element.
To fix this issue, find the “link” element in question and make sure that the “href” attribute contains a valid URL without any illegal characters.
Here’s some example HTML code of a link element:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>Here is some content...</p>
</body>
</html>In the above example, the link element has a valid href attribute value of styles/main.css. Make sure that your href attribute values don’t contain any illegal characters.
Illegal character “[” in the iframe src URL requires percent-encoding or removal.
The iframe element’s src must be a valid URL. According to URL syntax, characters like [ and ] are not allowed in the query unless percent-encoded. If your src contains array-like parameters (e.g., filters[category]=news), encode reserved characters: [ becomes %5B and ] becomes %5D. Avoid spaces and encode other reserved characters as needed. Alternatively, adjust the server to accept dot or bracketless notation (e.g., filters.category=news or filters_category=news) so the URL stays valid without encoding.
HTML Examples
Example causing the validator error
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe URL Error</title>
</head>
<body>
<!-- [ and ] are illegal in URLs unless encoded -->
<iframe src="https://example.com/embed?filters[category]=news&filters[tags]=web"></iframe>
</body>
</html>Fixed example with percent-encoding
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe URL Fixed</title>
</head>
<body>
<!-- Encode [ as %5B and ] as %5D -->
<iframe src="https://example.com/embed?filters%5Bcategory%5D=news&filters%5Btags%5D=web"></iframe>
</body>
</html>Square brackets in an img src query string must be percent-encoded to be valid.
The src attribute on img must be a valid URL. In URL query strings, characters like [ and ] are not allowed unescaped per URL syntax. When present (often from frameworks adding array-like params), they must be percent-encoded as [ -> %5B and ] -> %5D. Alternatively, remove brackets from the query or use a server-side/route format that avoids them.
HTML examples
Example causing the validator error
<img src="/images/photo.jpg?size[width]=300&size[height]=200" alt="Sample">Fixed example using percent-encoding
<img src="/images/photo.jpg?size%5Bwidth%5D=300&size%5Bheight%5D=200" alt="Sample">Fixed example by avoiding brackets in params
<img src="/images/photo.jpg?size_width=300&size_height=200" alt="Sample">The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
Replace square brackets in srcset URLs or percent-encode them.
The img element’s srcset expects valid URLs for each image candidate. According to the URL Standard, unescaped square brackets are not allowed in the path or query of an HTTP(S) URL used in HTML attributes like srcset. They must be either removed, replaced, or percent-encoded.
- Use safe characters in query parameters (e.g., hyphens or underscores instead of brackets).
- If brackets must remain for backend reasons, percent-encode them: [ -> %5B, ] -> %5D.
- Ensure each image candidate follows the URL [whitespace] descriptor pattern (e.g., 2x, 300w) with commas separating candidates.
HTML examples
Example causing the error
<img
src="image.jpg"
srcset="image.jpg?size=[small] 1x, image@2x.jpg?size=[large] 2x"
alt="Sample">Corrected example (encode brackets)
<img
src="image.jpg"
srcset="image.jpg?size=%5Bsmall%5D 1x, image@2x.jpg?size=%5Blarge%5D 2x"
alt="Sample">Corrected example (avoid brackets)
<img
src="image.jpg"
srcset="image.jpg?size=small 1x, image@2x.jpg?size=large 2x"
alt="Sample">Use the MathML namespace with http:// (not https://) in the xmlns value.
Explanation
The xmlns attribute defines an XML namespace. For MathML in HTML or XHTML, the only permitted namespace URI is:
- http://www.w3.org/1998/Math/MathML
Using https:// is not equivalent and fails validation. In HTML5, embedded MathML typically doesn’t set xmlns on <math>; the parser assigns the MathML namespace automatically. In XHTML or XML contexts, xmlns="http://www.w3.org/1998/Math/MathML" is required on the <math> element (or inherited from an ancestor).
HTML examples
Reproducing the issue (invalid https:// namespace)
<!DOCTYPE html>
<html lang="en">
<head>
<title>MathML Invalid Namespace</title>
</head>
<body>
<math xmlns="https://www.w3.org/1998/Math/MathML">
<mi>x</mi><mo>+</mo><mn>1</mn>
</math>
</body>
</html>Fix in HTML5 (omit xmlns; let HTML set the namespace)
<!DOCTYPE html>
<html lang="en">
<head>
<title>MathML Correct in HTML</title>
</head>
<body>
<math>
<mi>x</mi><mo>+</mo><mn>1</mn>
</math>
</body>
</html>Fix in XHTML/XML (use the exact http:// URI)
<!DOCTYPE html>
<html lang="en">
<head>
<title>MathML Correct in XHTML/XML</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>x</mi><mo>+</mo><mn>1</mn>
</math>
</body>
</html>