HTML Validation

Bad value “” for attribute “imagesrcset” on element “link”: Must contain one or more image candidate strings.

About This HTML Issue

For rel="preload" and as="image" only, the imagesrcset attribute is a sourceset attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.

Learn more:

Last reviewed: May 30, 2023

Was this guide helpful?

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Start Free Trial See Pricing

Ready to validate your site?

Find Accessibility and HTML issues in your large sites, in seconds. Get your site scanned by Axe Core and W3C Validator with just one click.

Pro Trial Free Trial

Reading time

1 min read

Category

HTML Validation

Engine

W3C Validator

Last reviewed

May 30, 2023

Resources

Related W3C Validator Issues (80)

Bad value “X” for attribute “href” on element “link”: Illegal character in path segment: “X” is not allowed.

An illegal character has been found for the “href” attribute on the “link” element.

To fix this issue, find the “link” element in question and make sure that the “href” attribute contains a valid URL without any illegal characters.

Here’s some example HTML code of a link element:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>Here is some content...</p>
  </body>
</html>

In the above example, the link element has a valid href attribute value of styles/main.css. Make sure that your href attribute values don’t contain any illegal characters.

Bad value “” for attribute “imagesizes” on element “link”: Must not be empty.

Bad value “X” for attribute “media” on element “link”: unrecognized media “X”.

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.

Bad value X for attribute “type” on element “link”: Expected a token character or “/” but saw “:” instead.

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">

A “link” element must have an “href” or “imagesrcset” attribute, or both.

A link element is invalid unless it contains at least one of the href or imagesrcset attributes.

The link element is used to define relationships between the current document and external resources, most commonly stylesheets. According to the HTML standard, a link must have either an href attribute, which points to the resource, or an imagesrcset attribute for responsive icons. If both are missing, the validator throws an error. This ensures that the link actually references a resource, otherwise it serves no functional purpose.

Correct usage:

With an href (for stylesheets, icons, etc.)

<link rel="stylesheet" href="styles.css">

With imagesrcset (for responsive icons)

<link rel="preload" as="image" type="image/png" imagesrcset="icon-1x.png 1x, icon-2x.png 2x">

A “link” element must not appear as a descendant of a “body” element unless the “link” element has an “itemprop” attribute or has a “rel” attribute whose value contains “dns-prefetch”, “modulepreload”, “pingback”, “preconnect”, “prefetch”, “preload”, “prerender”, or “stylesheet”.

link

A <link> element has been found in an invalid body context. Check the attributes of the <link> element and ensure it’s not within the <body> section.

If the element is within the <head> section, it may have been interpreted as a body context depending on previous elements. For example, while this <link> element is valid per se and is in the <head> section, it is deemed invalid because the previous <img> element made the validator consider it a body context:

<!DOCTYPE html>
<html lang="">
  <head>
    <title>Test</title>
    <img src="photo.jpg" alt="A smiling cat" />
    <link rel="canonical" href="https://example.com/" />
  </head>
  <body>
    <p>Some content</p>
  </body>
</html>

If we fix that document and move the <img> tag within the body, the issue raised about <meta> disappears because it’s now in a valid context:

<!DOCTYPE html>
<html lang="">
  <head>
    <title>Test</title>
    <link rel="canonical" href="https://example.com/" />
  </head>
  <body>
    <p>Some content</p>
    <img src="photo.jpg" alt="A smiling cat" />
  </body>
</html>

A “link” element with a “rel” attribute that contains the value “preload” must have an “as” attribute.

A “link” element with an “as” attribute must have a “rel” attribute that contains the value “preload” or the value “modulepreload”.

The error message indicates that the <link> element contains an as attribute, but its rel attribute does not hold the correct value. According to the HTML specification, when using the as attribute, the rel attribute must be set to "preload" or "modulepreload".

Explanation

The as attribute is used to specify the type of content being loaded, which helps the browser to handle it appropriately. To preload resources, you need to specify the rel attribute with the value "preload" (for general resources) or "modulepreload" (specifically for JavaScript modules).

Example with preload:

If you are preloading a stylesheet, the rel attribute should be set to "preload":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Correct Usage of Link with as Attribute</title>
    <link rel="preload" href="styles.css" as="style">
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

Example with modulepreload:

If you are preloading a JavaScript module, the rel attribute should be set to "modulepreload":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Correct Usage of Link with Modulepreload</title>
    <link rel="modulepreload" href="script.js" as="script">
</head>
<body>
    <p>Hello, World!</p>
</body>
</html>

Bad value (true|false) for attribute “itemscope” on element “html”.

The itemscope attribute is a boolean attribute in HTML5, which means it does not take any values. Adding any value (such as true or false) will cause an error. When using boolean attributes, they should either be present or absent. If an attribute like itemscope is present, it is considered true.

Here’s how to correct the error:

Incorrect Usage:

<div itemscope="true">

Correct Usage:

<div itemscope>

Explanation:

Simply including the itemscope attribute without any value is the correct way to use it.
If you don’t want to use the itemscope attribute, just remove it from the tag.

Bad value “callto:X” for attribute “href” on element “a”: Illegal character in scheme data: space is not allowed.

Spaces are not permitted in the href value for phone links; the phone number must be a continuous string without spaces or slashes.

The href attribute of an anchor (<a>) element defines the link’s destination. For phone numbers, the proper URI scheme is tel:, not callto:. According to the HTML standard and the WHATWG Living Standard, the phone number should contain only digits and may use plus (+) or hyphen (-) characters for formatting, but it should not include spaces or slashes.

Incorrect HTML:

<a href="callto:07142/ 12 34 5">Call us</a>

Correct HTML:

<a href="tel:0714212345">Call us</a>

With country code and optional formatting:

<a href="tel:+49714212345">Call us</a>

For best compatibility and validation, always use the tel: scheme and ensure the phone number string contains only allowed characters.

Ready to validate your sites?
Start your free trial today.

Pro Trial Free Trial