HTML Guide
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.
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 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>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 for <img> tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />Ensure the src attribute on the script element is non-empty and points to a valid resource.
The src attribute in a script element specifies the URL of an external script file. An empty src attribute is invalid because it tells the browser to fetch a resource from a URL that is not provided, leading to loading errors. Instead, ensure that the src attribute contains a valid file path or URL to an existing script file. If the script content is meant to be inline, you should omit the src attribute altogether and include the script content directly within the script element.
Example of a Valid External Script
Here is a valid example of a script element with a non-empty src attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Script Example</title>
</head>
<body>
<script src="path/to/script.js"></script>
</body>
</html>Example of a Valid Inline Script
If the script is to be written inline, exclude the src attribute and write the JavaScript code directly within the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Script Example</title>
</head>
<body>
<script>
console.log('This is an inline script.');
</script>
</body>
</html>Troubleshooting
Double-check the script’s file path:
- Ensure the file path you provide in the src is correct relative to the HTML file.
- Make sure the script file exists in the location specified.
- If using a network URL, verify that the URL is correct and accessible.
srcset contains candidates without a width descriptor while sizes is present, so each candidate must use a width (w) descriptor.
When an img has sizes, every srcset candidate must include a width descriptor like 320w, not a pixel density descriptor like 1x. Mixed descriptors are not allowed in the same srcset. Use either:
- Width descriptors with sizes (e.g., 320w, 640w, 1024w)
- Density descriptors without sizes (e.g., 1x, 2x)
The browser uses sizes to map CSS layout width to the best w candidate. Without sizes, density (x) can be used, but not together with sizes.
HTML examples
Reproduce the issue (invalid: sizes + x descriptors)
<img
src="photo-640.jpg"
srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
sizes="(max-width: 600px) 100vw, 600px"
alt="Sample photo">Fix using width descriptors with sizes (valid)
<img
src="photo-640.jpg"
srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Sample photo">Alternative fix: remove sizes and use density descriptors (valid)
<img
src="photo-640.jpg"
srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
alt="Sample photo">Use role="none" (or remove the role) instead of role="presentation" on an img.
The role attribute maps elements to ARIA roles. For images, the valid way to make an image decorative is to either omit the ARIA role and use an empty alt attribute (alt=""), or use the ARIA role none. In ARIA 1.1, role="none" and role="presentation" are equivalent, but the W3C HTML Validator flags role="presentation" on img because the correct, accessible pattern is an empty alt to hide the image from assistive tech. Use alt="" alone, or pair it with role="none" if you need an explicit ARIA role. If the image conveys meaning, provide a descriptive alt and no role.
HTML Examples
Example that reproduces the issue
<img src="avatar.png" alt="" role="presentation">Fixed examples
Decorative image (preferred minimal fix):
<img src="avatar.png" alt="">Informative image:
<img src="chart.png" alt="Quarterly sales trend line chart">Backslashes (\) are not allowed in href values; use forward slashes (/) to separate path segments in URLs.
The href attribute in the a (anchor) element defines the hyperlink target and must contain a valid URL. According to the WHATWG HTML Standard, URL paths must use forward slashes (/) as delimiters, not backslashes (\). Backslashes are not recognized by web browsers as valid path separators and will cause validation errors or unexpected behavior. This issue often occurs when copying Windows file paths, which use backslashes, into HTML.
Incorrect HTML:
<a href="folder\page.html">Link</a>Correct HTML:
<a href="folder/page.html">Link</a>If you need to link to a file or resource, always replace any backslashes with forward slashes for proper HTML and browser compatibility.
The sizes attribute for an img element requires valid CSS syntax, and auto is not an acceptable value within that attribute.
The sizes attribute allows you to specify a list of media conditions and corresponding sizes for the images. Each condition determines which size of the image should be displayed at different viewport widths, ensuring responsive image delivery. The syntax for sizes should be a comma-separated list of media queries followed by a value denoting the corresponding width of the image. This width value may be in pixels (px) or as a percentage (vw, vh), but auto is not valid in this context.
Here is a breakdown of a correct sizes attribute usage:
- 50vw: This denotes that the image should take up 50% of the viewport’s width.
- (max-width: 600px) 100vw, 50vw: When the viewport is at most 600 pixels wide, the image should occupy the full width (100vw). Otherwise, it should take 50 percent of the viewport width.
Remove “auto” from your sizes value and provide a valid, contextually correct CSS value.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Images Example</title>
</head>
<body>
<img
src="image.jpg"
sizes="(max-width: 472px) 100vw, 472px"
srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1000w"
alt="A description of the image"
>
</body>
</html>In this example, if the viewport width is less than or equal to 472 pixels, the image will take up the entire width (100vw). For larger widths, the srcset specifies different image files for varying resolutions.