HTML Guide
The media attribute on a <link> element specifies the media for which the linked resource is intended, using a valid media query. The value indicated is not a valid media query, which leads to a parse error.
Explanation
The media attribute is used to define what type of device the linked stylesheet should be applied to. Examples include common media types like screen, print, or all, as well as more complex media queries, such as (max-width: 600px) for responsive designs.
Correct Usage
-
Media Type Only:
You can specify general media types such as screen, print, or all.
<link rel="stylesheet" href="styles.css" media="screen"> -
Media Query:
For more precise control, use a media query to target specific conditions.
<link rel="stylesheet" href="styles.css" media="(max-width: 600px)">
The media attribute on the link element cannot use the deprecated value projection; only valid CSS media types should be specified.
The media attribute specifies what media/device the linked resource is designed for, using a media query or a list of valid media types. In modern HTML and CSS, commonly accepted values include all, print, and screen.
The value projection was intended for projectors but has been deprecated and is no longer recognized by browsers or the HTML standard. To ensure validity and compatibility, remove projection and use only accepted types such as screen and/or print.
Incorrect example (with deprecated value):
<link rel="stylesheet" href="style.css" media="screen, projection">Correct examples:
<link rel="stylesheet" href="style.css" media="screen"><link rel="stylesheet" href="style.css" media="screen, print">If you intend your stylesheet for screens and print, you can use both screen, print; for only screens, use just screen. If the stylesheet should apply to all devices, you can omit the media attribute or use all:
<link rel="stylesheet" href="style.css">or
<link rel="stylesheet" href="style.css" media="all">The media attribute on a <link> element has not been recognized.
This attribute specified what media the linked resource is optimized for. As an example, the following will link a general stylesheet, and a specific one for printing:
<head>
<link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>Valid values for this attribute include:
- all. Default, used for all media.
- print. Used for printers and print previews.
- screen. Used for computer, tablets or smartphone screens.
Invalid value used for the multiple attribute on an input element.
The multiple attribute is a boolean attribute for certain input types (e.g., email, file). Boolean attributes must appear without a value (or with the same name as value in legacy cases), and they only work on specific types. Valid usage: <input type="email" multiple> or <input type="file" multiple>. Invalid usage includes multiple="1", multiple="true", or using multiple on unsupported types like text or number. The email type allows comma-separated addresses when multiple is present; the file type allows selecting more than one file.
HTML Examples
Example that reproduces the error
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invalid multiple</title>
</head>
<body>
<!-- Invalid: value on boolean attribute, and wrong type -->
<input type="text" name="tags" multiple="1">
</body>
</html>Corrected example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid multiple</title>
</head>
<body>
<!-- Valid: boolean attribute without a value on supported types -->
<input type="email" name="recipients" multiple placeholder="name@example.com, other@example.com">
<input type="file" name="attachments" multiple>
</body>
</html>The value of the name attribute on an <iframe> should not start with an underscore (_).
Browsing context names that begin with an underscore are reserved keywords in HTML, like _blank, _self, _parent, and _top. Using these reserved names or any custom name starting with an underscore for the name attribute of an <iframe> can lead to unexpected behavior and is considered invalid HTML.
Here’s how to fix the issue:
Problematic Code
<iframe src="https://example.com" name="_example"></iframe>Solution
To resolve this issue, you should use a valid value for the name attribute that does not start with an underscore.
Corrected Code
<iframe src="https://example.com" name="example"></iframe>Steps:
- Identify the iframe element with the invalid name attribute value that starts with an underscore.
- Replace the name value with a valid identifier that does not start with _. Use letters, numbers, hyphens (-), and underscores (_) (but not at the beginning).
The novalidate attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the novalidate property.
This boolean attribute indicates that the form shouldn’t be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.
Example:
<form method="post" novalidate>
<label>User Name:
<input name="user-name" autocomplete="name">
</label>
<button>Save</button>
</form>The W3C Validator issue you’re seeing is because the ping attribute on the <a> (anchor) element is supposed to contain a space-separated list of URLs to which, when the hyperlink is activated, the browser will send ping requests. The ping attribute must only contain proper “http” or “https” URLs, that is, relative URLs are not allowed.
Example of Incorrect Code
<a href="https://example.com" ping="/track">Visit Example</a>Examples of Correct Code
-
Proper Ping URL: Ensure the ping URL starts with http or https and is correctly formatted.
<a href="https://example.com" ping="https://example.com/track">Visit Example</a> -
Multiple URLs: If you have multiple URLs, they should be space-separated and each should be a valid URL.
<a href="https://example.com" ping="https://example.com/track https://example.com/another-track">Visit Example</a>
Common Mistakes to Avoid
- Using invalid URL schemes like mailto: or /relative-path.
- Including broken URLs or URLs with protocols other than http or https.
- Incorrectly formatting multiple URLs; they must be space-separated, not comma-separated or otherwise.
Note
The ping property is not effective in Firefox and its usage may be limited due to privacy and security concerns.
Spaces in the poster attribute value are not valid in URLs and must be percent-encoded as %20.
The poster attribute on the video element specifies an image to show until the user plays or seeks the video. Attribute values that represent URLs (such as in src, href, or poster) must use valid URI syntax, meaning spaces are not allowed. Spaces must be replaced with %20, or you can use a path that avoids spaces entirely.
Example — Incorrect:
<video controls poster="/img/video images/snapshot.png">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Example — Fixed with percent-encoding:
<video controls poster="/img/video%20images/snapshot.png">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Example — Fixed by removing spaces from the folder name:
<video controls poster="/img/video-images/snapshot.png">
<source src="/videos/sample.mp4" type="video/mp4">
</video>Always encode any space in URLs as %20 or avoid spaces in file and folder names.
The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.
Here’s an example of using the rel attribute to link a document to a CSS stylesheet:
<link rel="stylesheet" href="default.css" />Here’s an example os using the rel attribute to tell search engine spiders to ignore the link relationship with another document:
<a href="https://example.com" rel="nofollow">more info</a>The boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.
If this property is not present, the input will be considered as optional. To mark an input as required, it’s enough to include the property without any value, or pass it the required value as in these examples:
Example:
<input type="text" required>
<input type="text" required="required">The sandbox attribute is used with the iframe element to isolate the content of the embedded document from the rest of the page. It helps prevent malicious code from running on your website. However, the value assigned to the sandbox attribute in your iframe element includes both the allow-scripts and allow-same-origin options. This combination essentially removes all the protections that the sandbox attribute provides and allows the embedded document to break out of the sandbox.
To fix this issue, you should remove the allow-scripts and allow-same-origin values from the sandbox attribute. Instead, you should explicitly enable only the permissions that the embedded document requires.
Here’s an example iframe element with the proper use of sandbox:
<iframe src="https://example.com" sandbox="allow-forms allow-popups"></iframe>This iframe element loads the https://example.com URL and has its sandbox attribute set to only allow-forms and allow-popups. This explicitly enables only the permissions that the embedded document may need, while also retaining the protections of the sandbox attribute.
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.
sizes contains an invalid media condition; the value must be a comma-separated list of media conditions with corresponding slot sizes, ending with an optional fallback length.
Detailed explanation:
- The sizes attribute on img pairs a media condition with a slot size that represents the layout width of the image for that condition. Syntax: (<media-condition>) <length>[, ...], <length> where the last item can be a bare length fallback.
- A media condition uses the same grammar as CSS media queries. It must be valid CSS, e.g., (min-width: 600px) or (width <= 50rem) and (orientation: landscape). Each condition must be enclosed in parentheses unless using logical operators combining proper conditions.
Common parse errors:
- Missing parentheses: use (min-width: 600px), not min-width: 600px.
- Invalid units or tokens: use px, em, rem, vw, etc.; avoid % in media conditions.
- Missing slot size after a condition: (min-width: 600px) must be followed by a length like 600px.
- Using px only for slot size without units or using percentages: slot size must be a length like 300px, 50vw, not 300.
- Trailing comma or extra commas.
- Misusing comparison syntax: use modern range syntax like (600px <= width <= 1000px) or the traditional form (min-width: 600px) and (max-width: 1000px). Do not write (min-width <= 600px).
- Slot sizes must be lengths: px, em, rem, vw, vh, vmin, vmax, ch. Percentages are not allowed in sizes slot sizes.
- The srcset widths (w descriptors) must correspond to the intrinsic widths of the image candidates, e.g., 400w, 800w. The browser picks one based on sizes.
HTML examples:
-
Correct usage with media conditions and fallback:
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(min-width: 900px) 50vw, (min-width: 600px) 66vw, 100vw" alt="Decorative pattern"> -
Using range syntax and avoiding common mistakes:
<img src="hero-1600.jpg" srcset="hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w" sizes="(800px <= width < 1200px) 80vw, (width >= 1200px) 50vw, 100vw" alt="Hero banner"> -
Minimal fixed example for a typical error (missing parentheses and slot size): Incorrect:
<img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="min-width: 600px, 100vw" alt="Sample">Correct:
<img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="(min-width: 600px) 50vw, 100vw" alt="Sample"> -
Example avoiding invalid tokens and commas:
<img src="avatar-256.png" srcset="avatar-128.png 128w, avatar-256.png 256w" sizes="(orientation: landscape) 30vw, 50vw" alt="User avatar">
The sizes attribute contains an empty source size, probably due to a trailing comma.
According to the HTML standard, the sizes attribute on the img element must contain a valid source size list. Each size is separated by a comma, and there must not be a trailing comma because that would create an empty entry, which is not allowed.
An example of an invalid sizes attribute:
<img
src="image.jpg"
alt=""
sizes="(min-width: 2200px) 100vw, (min-width: 856px) 461px, (min-width: 784px) 615px, "
srcset="image-2200.jpg 2200w, image-856.jpg 856w">To fix the validation error, remove the trailing comma so the size list does not end with an empty value:
<img
src="image.jpg"
alt=""
sizes="(min-width: 2200px) 100vw, (min-width: 856px) 461px, (min-width: 784px) 615px"
srcset="image-2200.jpg 2200w, image-856.jpg 856w">Each value in the sizes attribute should be a valid media condition and source size, separated only by commas, with no trailing or empty values.
The sizes attribute on the img element must use CSS length units (such as px, vw, em) and not image width descriptors like w.
The sizes attribute defines the intended display size of the image in CSS length units, which helps the browser select the appropriate image from the srcset. Use units like px (pixels) or vw (viewport width percentage), not w, which is used in the srcset descriptors. The srcset attribute specifies different image resources and their width descriptors (e.g., 860w), while sizes reflects the image’s display size in the layout.
Correct usage:
- sizes="(min-width: 568px) 140px" tells the browser the image will be displayed as 140 pixels wide when the viewport is at least 568 pixels wide.
- srcset="photo.png?w=860&q=90 860w" uses w as the descriptor for the image resource’s width.
HTML example:
<img
alt=""
sizes="(min-width: 568px) 140px"
srcset="photo.png?w=860&q=90 860w"
src="photo.png?w=860&q=90">Summary:
- Use CSS units like px, vw, etc. in the sizes attribute.
- Use the w descriptor only in srcset, not in sizes.
Invalid sizes syntax in the <img> sizes attribute causes the validator error; each size value must be a valid CSS length with units and optional media condition.
Detailed explanation
The sizes attribute on responsive images (used with srcset) tells the browser how wide the image will be in CSS pixels under certain media conditions so it can choose the best candidate from srcset. It must be a comma-separated list of one or more size descriptors:
- Optional media condition followed by a length: (<media-condition>) <length>
- Or a final fallback length without media condition: <length>
Valid length units include: em, ex, ch, rem, cap, ic, vw, svw, lvw, dvw, vh, svh, lvh, dvh, vi, svi, lvi, dvi, vb, svb, lvb, dvb, vmin, svmin, lvmin, dvmin, vmax, svmax, lvmax, dvmax, cm, mm, q, in, pc, pt, px. Percentages are not allowed in sizes. Bare numbers without units are invalid. The media condition must be valid per CSS Media Queries (e.g., (max-width: 600px)), and each list item must have exactly one length value.
Common mistakes that trigger this error:
- Missing units: sizes="(max-width: 600px) 100" → must be 100px or another unit.
- Using %: sizes="(max-width: 600px) 100%" → percentages are invalid in sizes.
- Multiple lengths per item: sizes="(min-width: 800px) 50vw 400px" → only one length per item.
- Typos in units: 100 pxx, 100vws.
- Missing fallback: while not strictly required if all conditions cover all cases, providing a final fallback length avoids unexpected behavior.
Ensure sizes pairs correctly with srcset; srcset provides image candidates with width descriptors (w), and sizes expresses the slot width the image will occupy.
HTML examples
Correct usage with media conditions and fallback
<img
src="img-400.jpg"
srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
alt="Sample image">Fixing missing units (was 100 -> 100px)
<img
src="avatar-200.jpg"
srcset="avatar-200.jpg 200w, avatar-400.jpg 400w"
sizes="(max-width: 480px) 100vw, 200px"
alt="User avatar">Avoiding invalid percentages (use vw instead)
<img
src="banner-800.jpg"
srcset="banner-800.jpg 800w, banner-1600.jpg 1600w"
sizes="(max-width: 700px) 100vw, 80vw"
alt="Promotional banner">Single unconditional size (no media condition)
<img
src="thumb-320.jpg"
srcset="thumb-320.jpg 320w, thumb-640.jpg 640w"
sizes="320px"
alt="Thumbnail">Correct srcset with sizes alignment
<img
src="photo-640.jpg"
srcset="photo-640.jpg 640w, photo-960.jpg 960w, photo-1280.jpg 1280w"
sizes="(min-width: 1200px) 800px, (min-width: 800px) 60vw, 90vw"
alt="Landscape photo">If the validator pinpoints a position (Z), check that token for a missing or invalid unit, extra tokens after the length, or malformed media condition.
sizes only accepts a valid media condition list (e.g., (min-width: 600px) 50vw, 100vw); malformed media conditions or missing length values trigger this parse error.
Detailed explanation
- Element: source in a picture or audio/video context. For responsive images, use attributes srcset, optional media, and optional sizes.
-
Attribute: sizes applies only when srcset contains width descriptors (e.g., 320w, 640w). It is a comma-separated list of:
- One or more media conditions followed by a length (e.g., (min-width: 800px) 50vw)
- A final fallback length with no media condition (e.g., 100vw)
Common parse errors:
- Missing parentheses around conditions: min-width: 600px → (min-width: 600px)
- Using invalid units or tokens: 50 (needs a length like 50vw or 50rem)
- Missing length after a condition: (min-width: 800px)
- Trailing commas or malformed separators
- Using sizes while srcset uses pixel density descriptors (1x, 2x); sizes is ignored for x-descriptors and may confuse validators
- Valid media condition syntax mirrors CSS media queries without the @media keyword. Use logical operators and, or, not per CSS Media Queries spec, and ensure spaces and colons are correct.
HTML examples
-
Correct responsive image with width descriptors and sizes
<picture> <source type="image/webp" srcset="hero-480.webp 480w, hero-800.webp 800w, hero-1200.webp 1200w" sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 100vw"> <img src="hero-800.jpg" srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w" sizes="(min-width: 1200px) 1200px, (min-width: 800px) 800px, 100vw" alt="Hero image"> </picture> -
Using viewport width units for simpler sizing
<img src="photo-640.jpg" srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1024.jpg 1024w" sizes="(min-width: 900px) 50vw, 100vw" alt="Sample photo"> -
Correct when using pixel density descriptors (omit sizes)
<img src="avatar@1x.jpg" srcset="avatar@1x.jpg 1x, avatar@2x.jpg 2x" alt="User avatar">
Fixing common mistakes
-
Add parentheses and a length:
<img src="img-800.jpg" srcset="img-480.jpg 480w, img-800.jpg 800w" sizes="(min-width: 600px) 50vw, 100vw" alt="Example"> -
Remove stray comma and ensure final fallback:
<img src="banner-800.jpg" srcset="banner-400.jpg 400w, banner-800.jpg 800w" sizes="(min-width: 700px) 60vw, 100vw" alt="Banner"> -
Minimal valid document example
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Valid sizes Attribute</title> </head> <body> <img src="pic-800.jpg" srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="(min-width: 600px) 50vw, 100vw" alt="Picture"> </body> </html>
Use a valid media length in the sizes attribute; each slot’s length must include a unit (e.g., px, vw) and cannot be unitless.
Detailed explanation
The sizes attribute on responsive images (<img> or <source> within <picture>) specifies, for each media condition, the slot size that the image will occupy in the layout. Each size value must be a valid CSS length with units, or the keyword auto (for <img> only; not useful with <source>). Unitless numbers (e.g., 300) are invalid; use 300px. Percentages are not allowed in sizes. Valid units include: px, em, rem, vw, vh, and the full set listed by the validator (e.g., svw, lvh, cm, etc.).
Common pitfalls:
- Missing units: sizes="(min-width: 768px) 600, 100vw" → 600 must be 600px.
- Using %: sizes="50%" is invalid; use a viewport unit like 50vw.
- Malformed list: values must be comma-separated media conditions followed by a length, ending with a fallback length.
- Putting sizes on <source> is valid, but syntax must match the same rules as on <img>.
Reference keywords:
- sizes
- srcset
- media (on <source>)
- CSS length units
Valid pattern
- With conditions: sizes="(media-condition) length, ... , fallback-length"
- Without conditions: sizes="fallback-length"
HTML examples
Fix missing units
Before (invalid):
<picture>
<source
type="image/webp"
srcset="hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(min-width: 900px) 800, 100vw">
<img
src="hero-800.jpg"
srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(min-width: 900px) 800, 100vw"
alt="Hero image">
</picture>After (valid):
<picture>
<source
type="image/webp"
srcset="hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(min-width: 900px) 800px, 100vw">
<img
src="hero-800.jpg"
srcset="hero-800.jpg 800w, hero-1200.jpg 1200w"
sizes="(min-width: 900px) 800px, 100vw"
alt="Hero image">
</picture>Replace percentage with viewport units
Before (invalid):
<picture>
<source
media="(min-width: 600px)"
srcset="card-600.webp 600w, card-900.webp 900w"
sizes="50%">
<img
src="card-600.jpg"
srcset="card-600.jpg 600w, card-900.jpg 900w"
sizes="50%"
alt="Product card">
</picture>After (valid):
<picture>
<source
media="(min-width: 600px)"
srcset="card-600.webp 600w, card-900.webp 900w"
sizes="50vw">
<img
src="card-600.jpg"
srcset="card-600.jpg 600w, card-900.jpg 900w"
sizes="50vw"
alt="Product card">
</picture>Clean, minimal example with multiple slots
<picture>
<source
type="image/avif"
srcset="banner-480.avif 480w, banner-960.avif 960w, banner-1440.avif 1440w"
sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw">
<img
src="banner-480.jpg"
srcset="banner-480.jpg 480w, banner-960.jpg 960w, banner-1440.jpg 1440w"
sizes="(min-width: 1200px) 960px, (min-width: 600px) 80vw, 100vw"
alt="Responsive banner">
</picture>If the validator reports “found Y at Z,” inspect the exact character at position Z for a missing unit, stray %, or malformed comma/whitespace, then replace with a valid CSS length unit.
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.
An <iframe> element allows to embed an HTML document inside another HTML document, and its src attribute is indicated the source URL of the embedded web page. The query part of that URL contains one or more space characters, which are not allowed, for example:
<iframe src="https://maps.google.it/maps?q=2700 6th Avenue"></iframe>You should properly escape all space characters as %20 like this:
<iframe src="https://maps.google.it/maps?q=2700%206th%20Avenue"></iframe>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.
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 element <img> contains a character that is not allowed, and should be encoded.
Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.