HTML Guide
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">Learn more:
Related W3C validator issues
The projection media type was deprecated in Media Queries 4.
Media types describe the general category of a device, for example screen, print and speech.
CSS 2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn’t be used.
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 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.
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 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 that is using the preload value in the rel attribute is missing the as attribute, used to indicate the type of the resource.
The preload value of the <link> element’s rel attribute lets you declare fetch requests in the HTML’s <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers’ main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page’s render, improving performance.
The as attribute specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct Accept request header.
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>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.
The href attribute on the link element must not be empty.
For rel="preload" and as="image" only, the imagesizes attribute is a sizes attribute that indicates to preload the appropriate resource used by an img element with corresponding values for its srcset and sizes attributes.