# A “link” element with an “as” attribute must have a “rel” attribute that contains the value “preload” or the value “modulepreload”.
> Canonical HTML version: https://rocketvalidator.com/html-validation/a-link-element-with-an-as-attribute-must-have-a-rel-attribute-that-contains-the-value-preload-or-the-value-modulepreload
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
The `as` attribute specifies the type of content a `` 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 `` 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:
1. **You intended to preload a resource but forgot to set `rel="preload"`** — for example, writing `` without specifying `rel`.
2. **You added `as` to a regular `` by mistake** — for example, writing ``, 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 `` has `as="style"` but no `rel` attribute:
```html
```
### Incorrect: `as` attribute with `rel="stylesheet"`
The `as` attribute is not valid on a stylesheet link:
```html
```
### Correct: preloading a stylesheet
Use `rel="preload"` with the `as` attribute to hint the resource type:
```html
```
Note that preloading a stylesheet doesn't apply it — you still need a separate `` to actually use the CSS.
### Correct: preloading a font
```html
```
The `crossorigin` attribute is required when preloading fonts, even if they're served from the same origin.
### Correct: preloading a JavaScript module
```html
```
With `rel="modulepreload"`, the `as` attribute defaults to `"script"`, so you can omit it. You may still include it explicitly if you prefer:
```html
```
### Correct: regular stylesheet (no `as` needed)
If you simply want to load a stylesheet, no `as` attribute is required:
```html
```
### Full document example
```html
Preload Example
```