HTML Guide
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">
Learn more:
Related W3C validator issues
The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The src attribute on an element <img> contains a character which is not allowed unless properly encoded.
Special characters needing encoding are: :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =, as well as % itself.
For example, this image tag is incorrect because the src attribute contains an the unallowed characters [ and ]:
<img src="image[00].svg" alt="logo">
Instead, this is the properly percent-encoded src attribute, where [ has been replaced with %5B and ] with %5D.
<img src="image%5B00%5D.svg" alt="logo">
Space characters are not allowed in src attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:
<img src="https://example.com/?s=some term" alt="description" />
<img src="https://example.com/?s=some%20term" alt="description" />
The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.
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>
The src attribute for <img> tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />
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">
The URL in the src attribute value for an iframe is invalid as it contains an unexpected hash (#) character.
There’s an unexpected, possibly duplicate, hash character in the URÑ.
Examples:
Incorrect:
<iframe src="https://example.com/#?secret=123#abc"></iframe>
Correct (using only the query string):
<iframe src="https://example.com/#?secret=123"></iframe>
Correct (using the query string and a hash fragment) :
<iframe src="https://example.com/?secret=123#abc"></iframe>
The src attribute contains square brackets ([ or ]) in the URL’s query string, which are not permitted in valid HTML URLs.
According to the HTML standard, attribute values such as URLs must conform to valid URI syntax. Unencoded square brackets are reserved characters in URI syntax and must be percent-encoded. Specifically, [ should be replaced with %5B and ] with %5D. This ensures the URL is correctly interpreted by browsers and validators. For example, a URL parameter like sort=[asc] should be coded as sort=%5Basc%5D.
Correct HTML Example:
<iframe src="/page?time=%5Btimestamp%5D"></iframe>
Always encode reserved characters in URLs when using them in HTML attribute values to ensure W3C compliance.
This error message indicates that there is a backslash (\) used in a URL, which is not a valid character for URL paths.
You’ll need to replace the backslashes with forward slashes (/) in the URL path segments.
Here’s an example of a correct img tag using a valid URL path:
<img src="https://example.com/img/small/photo.png" alt="example image">
Also, make sure that the URL is correct and that the image file actually exists in the specified location.