HTML Guide

<img> tags used to display images require the attribute src to indicate the source of the image, for example <img src="/img/photo.jpg" />.

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.

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.

The src attribute on an <img> tag is not allowed to contain space characters. You should replace them with “%20“.

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 <script> tag allows authors to include dynamic scripts and data blocks in their documents. When the src is present, this tag accepts a type attribute which must be either:

• an empty string
• text/javascript (that’s the default, so it can be omitted)
• module

Examples:

<!-- This is valid, without a type it defaults to JavaScript -->

<script src="app.js"></script>

<!-- This is valid, but will warn that it can be omitted -->

<script type="text/javascript" src="app.js"></script>

<!-- An empty attribute is valid, but will warn that it can be omitted -->

<script type="" src="app.js"></script>

<!-- The module keyword is also valid as a type -->

<script type="module" src="app.js"></script>

<!-- Any other type is invalid -->

<script type="wrong" src="app.js"></script>
<script type="text/html" src="app.js"></script>
<script type="image/jpeg" src="app.js"></script>