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

About This HTML Issue

The as attribute specifies the type of content a <link> element is fetching — such as "style", "script", "font", or "image". The browser uses this information to set the correct request headers, apply the right Content Security Policy, and assign the appropriate priority to the request. However, the HTML specification restricts the as attribute to <link> elements whose rel attribute is either "preload" or "modulepreload". Using as with any other rel value (like "stylesheet", "icon", or a missing rel altogether) is invalid HTML.

This validation error commonly occurs in two scenarios:

You intended to preload a resource but forgot to set rel="preload" — for example, writing <link href="styles.css" as="style"> without specifying rel.
You added as to a regular <link> by mistake — for example, writing <link rel="stylesheet" href="styles.css" as="style">, where as is unnecessary because rel="stylesheet" already tells the browser what type of resource it is.

Getting this right matters for several reasons. Browsers rely on valid rel values to determine how to handle linked resources. An incorrect combination may cause the browser to ignore the as attribute entirely, leading to double-fetching of resources or incorrect prioritization. Additionally, invalid HTML can cause unpredictable behavior across different browsers.

How to fix it

If you want to preload a resource (font, stylesheet, image, script, etc.), set rel="preload" and keep the as attribute.
If you want to preload a JavaScript module, set rel="modulepreload". The as attribute defaults to "script" for module preloads and is optional in that case.
If you’re using a different rel value like "stylesheet" or "icon", remove the as attribute — it’s not needed and not allowed.

Examples

Incorrect: `as` attribute without `rel="preload"`

This <link> has as="style" but no rel attribute:

<link href="styles.css" as="style">

Incorrect: `as` attribute with `rel="stylesheet"`

The as attribute is not valid on a stylesheet link:

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

Correct: preloading a stylesheet

Use rel="preload" with the as attribute to hint the resource type:

<link rel="preload" href="styles.css" as="style">

Note that preloading a stylesheet doesn’t apply it — you still need a separate <link rel="stylesheet"> to actually use the CSS.

Correct: preloading a font

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

The crossorigin attribute is required when preloading fonts, even if they’re served from the same origin.

Correct: preloading a JavaScript module

<link rel="modulepreload" href="app.js">

With rel="modulepreload", the as attribute defaults to "script", so you can omit it. You may still include it explicitly if you prefer:

<link rel="modulepreload" href="app.js" as="script">

Correct: regular stylesheet (no `as` needed)

If you simply want to load a stylesheet, no as attribute is required:

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

Full document example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preload Example</title>
<!-- Preload critical resources -->

  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="hero.jpg" as="image">
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Apply the stylesheet -->

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <img src="hero.jpg" alt="Hero banner">
</body>
</html>

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

Learn more:

MDN Reference

MDN: <link>: The External Resource Link element

→

Help us improve our guides

Was this guide helpful?