HTML Guide
The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.
URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%) is found without being followed by two hexadecimal digits, a decoding error will be raised.
The most probable cause is an URL that contains a % that has not been properly encoded to %25 which is the code for the percent sign. For example:
<!-- This is invalid as the percentage sign has not been properly encoded -->
<img alt="" src="https://example.com/img.jpg?width=48%" />
<!-- This is valid as the percentage sign has been encoded as %25 -->
<img alt="" src="https://example.com/img.jpg?width=48%25" />To fix the issue of having a bad value for the src attribute on an img element due to having a tab, new line, or carriage return, you need to ensure that the src attribute does not contain any additional whitespace characters like tab, new line, or carriage return.
Incorrect code:
<img src="images/example.jpg
" alt="Example Image">Corrected code:
<img src="images/example.jpg" alt="Example Image">By removing the extra whitespace characters (new line in this case) and ensuring that the src attribute value is properly enclosed within quotes, the issue should be resolved.
The issue arises from the space character in the src attribute value of the script element. In URLs, spaces are not allowed and should be properly encoded to avoid validation errors.
Fix
Replace spaces with %20, which is the URL-encoded representation of a space.
Example
Before:
<script src="https://example.com/media assets/app.js"></script>After:
<script src="https://example.com/media%20assets/app.js"></script>Explanation
In this example, the space between “media” and “assets” in the URL is replaced with %20. This change ensures that the URL conforms to standards and is correctly processed by browsers and servers. Spaces and other special characters in URLs must be encoded to ensure proper formatting and accessibility.
There is an illegal double quote character (") at the end of the src attribute value in your <script> tag, which causes the attribute to be invalid.
Attribute values must not include unescaped or stray quote characters (" or ') inside them, as this breaks attribute parsing and results in invalid HTML. The src attribute for a <script> tag should contain a properly encoded URL without any stray quotes or illegal characters. In your case, a double quote has accidentally been included before the closing quote of the attribute.
Correct usage for a <script> tag with the async attribute is:
<script src="https://example.com/js/jquery-3.6.0.min.js?ver=6.8.2" async></script>Incorrect example with the error (shows the issue):
<script src="https://example.com/js/jquery-3.6.0.min.js?ver=6.8.2" async""></script>Make sure there are no stray characters in your attribute values and that boolean attributes like async do not have values—it should simply be present, as in async, not async"" or async="async".
If you need a full, minimal HTML document to validate, use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Script Tag Example</title>
</head>
<body>
<script src="https://example.com/js/jquery-3.6.0.min.js?ver=6.8.2" async></script>
</body>
</html>Double-check your HTML source code to ensure there are no accidental typos or misplaced quote marks in your tag attributes.
The src attribute value is malformed, check that it doesn’t contain extraneous characters.
For example, this is invalid because the URL in the src attribute contains a space in between the https: and // parts:
<a href="https: //example.com">Some link</a>To fix this issue, you can try removing the space after “https:” in the URL in the src attribute:
<a href="https://example.com">Some link</a>All values in the srcset attribute must include a width descriptor (such as 300w) when the sizes attribute is present.
The srcset attribute is used to provide multiple image sources for responsive images. Each image candidate string in srcset must specify the image’s width (e.g., 600w) or pixel density (e.g., 2x). When you use a sizes attribute, all srcset candidates must use width descriptors (w).
Example of incorrect usage:
<img
src="/img/pic1.jpg"
srcset="/img/pic1.jpg"
sizes="(max-width: 600px) 100vw, 600px"
alt=""
>This example is invalid because the srcset value does not include a width descriptor.
Corrected usage with width descriptors:
<img
src="/img/pic1.jpg"
srcset="/img/pic1.jpg 600w"
sizes="(max-width: 600px) 100vw, 600px"
alt=""
>If you have multiple image sizes, include each with its corresponding width:
<img
src="/img/pic1.jpg"
srcset="
/img/pic1_small.jpg 300w,
/img/pic1.jpg 600w
"
sizes="(max-width: 600px) 100vw, 600px"
alt=""
>Always match each image URL in srcset with a width (w) or pixel density (x) descriptor if appropriate for your layout.
The srcset property on img elements, when used, requires at least one value. This property is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.
Each image candidate string contains an image URL and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property.
Example:
<img
src="/img/cat-200px.png"
alt="Cat"
srcset="
/img/cat-200px.png 1x,
/img/cat-400px.png 2x
">The srcset attribute requires a width descriptor (w) or pixel density descriptor (x) for each image candidate when the sizes attribute is present.
When using the sizes attribute on an img element, each entry in srcset must include either a width descriptor (e.g., 860w) or a pixel density descriptor (e.g., 2x). This tells browsers how to select the most appropriate image source for the current viewport or display density. Omitting the descriptor leads to HTML validation errors and unexpected image selection.
Correct usage with width descriptors:
<img
alt=""
sizes="(min-width:568px) 140px"
srcset="photo.png?w=860&q=90 860w"
src="photo.png?w=860&q=90">Correct usage with pixel density descriptors (if sizes is removed):
<img
alt=""
srcset="photo.png?w=860&q=90 2x"
src="photo.png?w=860&q=90">Key points:
- With sizes, use width descriptors (e.g., 860w).
- Without sizes, you may use pixel density descriptors (e.g., 2x).
- Always use either px or w units in the sizes attribute values; do not use w.
URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%) is found without being followed by two hexadecimal digits, a decoding error will be raised.
The most probable cause is an URL that contains a % that has not been properly encoded to %25 which is the code for the percent sign. For example:
<!-- This is invalid as the percentage sign has not been properly encoded -->
<img alt="" src="https://example.com/img.jpg?width=48%" />
<!-- This is valid as the percentage sign has been encoded as %25 -->
<img alt="" src="https://example.com/img.jpg?width=48%25" />Ensure all descriptors in the srcset have positive widths greater than zero. In the srcset attribute, each source candidate consists of a URL followed by a width descriptor, which should be a positive integer followed by w.
The issue arises from using 0w, which is not valid as width descriptors must be positive numbers. The srcset attribute allows browsers to choose the appropriate image from different candidates based on device resolution and screen size, so specifying a meaningful width is important.
Here’s how you can fix it:
- Verify that each candidate in the srcset includes a valid URL and a width descriptor greater than zero.
- Decide the relevant width for your images and update the descriptors accordingly.
Here’s a corrected example of how to use the srcset attribute:
<picture>
<source
srcset="/images/icon_small_1x.png 300w,
/images/icon_small_2x.png 600w"
media="(max-width: 600px)">
<img src="/images/icon_fallback.png"
alt="App Logo">
</picture>In this example, each image in srcset has a positive width descriptor: 300w and 600w. This ensures that the browser can make an appropriate choice based on the current viewport and resolution, adhering to the W3C HTML standards.
The srcset property on source elements, when used, requires at least one value.
The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is a void element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
The srcset attribute is required if the source element’s parent is a <picture> element, but not allowed if the source element’s parent is an <audio> or <video> element.
The sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images. When this attribute is present, all image candidates must specify its width.
The value used in the target property of an <a> element has been identified as a keyword because it starts with an underscore _, but it’s not a valid keyword.
Values starting with an underscore for the target property are used for reserved keywords like _blank, _self, _parent or _top.
The value provided on the type attribute of an a element is not a valid MIME type.
The type attribute expects a MIME type that hints at the linked URL’s format.
The type attribute on <a> elements, when present, gives a hint on the MIME type of the linked resource, for example:
<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>That is, we’re talking about the type of the linked resource, not the type of the <a> element, as it’s sometimes misunderstood. The following example is invalid because button is not a valid MIME type.
<a href="/order.php" type="button">Submit</a>The value used to define the type of a link is not valid. You’re probably using a URL instead of a valid type.
Example of a valid type:
<link rel="icon" type="image/png" href="favicon.png">The specified type for an script element is not a valid MIME type as it’s missing a subtype.
A MIME type most-commonly consists of just two parts: a type and a subtype, separated by a slash (/) — with no whitespace between, for example:
text/javascriptThe attributes width and height on an iframe expect a valid positive integer without any decimals.
Here’s an example of incorrect code where decimals are being used for dimension attributes:
<iframe src="example.html" height="602.88" width="800.2"></iframe>Corrected code without decimals:
<iframe src="example.html" height="603" width="800"></iframe>In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.
The attributes width and height on an iframe expect a valid positive integer without any decimals.
Here’s an example of incorrect code where decimals are being used for dimension attributes:
<img src="photo.jpg" alt="Dog" height="602.88" width="800.2">Corrected code without decimals:
<img src="photo.jpg" alt="Dog" height="603" width="800">In the corrected code, the width and height values has been changed to a whole number, which conforms to the standard integer value expected by the W3C validator.
embed does not allow percentage values for the width (or height) attribute; only non-negative integers in CSS pixels are valid.
Explanation
- The embed element’s width and height content attributes accept only non-negative integers representing CSS pixels, per WHATWG HTML. A value like width="100%" is invalid.
- To make an embedded resource responsive or percentage-based, set numeric pixel values in attributes (or omit them) and control sizing with CSS using the style attribute or external stylesheets.
-
Valid approaches:
- Use width="600" (pixels) directly on embed.
- Omit width/height and use CSS like style="width:100%; height:400px;".
- For fully responsive aspect ratios, wrap embed in a container and size via CSS.
HTML examples
Invalid example (reproduces the validator error)
<!doctype html>
<html lang="en">
<head>
<title>Invalid embed width</title>
</head>
<body>
<embed src="file.pdf" type="application/pdf" width="100%" height="600"></embed>
</body>
</html>Fixed example (valid pixels in attributes, or CSS for percentage)
<!doctype html>
<html lang="en">
<head>
<title>Valid embed width</title>
<style>
.embed-fluid {
width: 100%;
height: 600px;
max-width: 800px; /* optional */
}
</style>
</head>
<body>
<!-- Option A: pixel attributes -->
<embed src="file.pdf" type="application/pdf" width="800" height="600"></embed>
<!-- Option B: CSS controls percentage width -->
<embed src="file.pdf" type="application/pdf" class="embed-fluid"></embed>
</body>
</html>The <iframe> element, used to embed another document inside the current document, accepts both attributes width and height which must be valid non-negative integers. Percentages are not allowed for these attributes.
<img> elements accept a width attribute to specify the size in pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS:
<img src="photo.jpg" alt="red car" style="width:100%;"><video> elements accept a width attribute to specify the width in CSS pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS.
Here’s an example of setting width and height on a video element.
<video controls width="640" height="480">
<source src="/media/cc0-videos/flower.webm" type="video/webm">
</video>Attribute values for width and height on the object element must be a valid integer (pixels), not a percentage.
In HTML5, the width and height attributes for the <object> element must be specified in pixels as an integer value, such as height="500". Using percentage values like height="100%" is not allowed in the attribute according to the HTML living standard and will trigger a validation error. To set a percentage height, use the CSS width and height properties instead.
Correct usage (pixels via attribute):
<object data="example.pdf" type="application/pdf" width="600" height="400"></object>Correct usage (percentage via CSS):
<object data="example.pdf" type="application/pdf" style="width: 100%; height: 100%;"></object>Example of a full valid HTML document using CSS for 100% height:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Object Height Example</title>
<style>
html, body {
height: 100%;
margin: 0;
}
object {
height: 100%;
width: 100%;
display: block;
}
</style>
</head>
<body>
<object data="example.pdf" type="application/pdf"></object>
</body>
</html>