HTML Guides for modulepreload
Learn how to identify and fix common HTML validation errors flagged by the W3C Validator — so your pages are standards-compliant and render correctly across every browser. Also check our Accessibility Guides.
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 specifyingrel. - You added
asto a regular<link>by mistake — for example, writing<link rel="stylesheet" href="styles.css" as="style">, whereasis unnecessary becauserel="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 theasattribute. - If you want to preload a JavaScript module, set
rel="modulepreload". Theasattribute defaults to"script"for module preloads and is optional in that case. - If you're using a different
relvalue like"stylesheet"or"icon", remove theasattribute — it's not needed and not allowed.
Examples
Incorrect: as attribute without rel="preload"
This <link> has as="style" but no rel attribute:
<linkhref="styles.css"as="style">
Incorrect: as attribute with rel="stylesheet"
The as attribute is not valid on a stylesheet link:
<linkrel="stylesheet"href="styles.css"as="style">
Correct: preloading a stylesheet
Use rel="preload" with the as attribute to hint the resource type:
<linkrel="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
<linkrel="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
<linkrel="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:
<linkrel="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:
<linkrel="stylesheet"href="styles.css">
Full document example
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Preload Example</title>
<!-- Preload critical resources -->
<linkrel="preload"href="styles.css"as="style">
<linkrel="preload"href="hero.jpg"as="image">
<linkrel="preload"href="font.woff2"as="font"type="font/woff2"crossorigin>
<!-- Apply the stylesheet -->
<linkrel="stylesheet"href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<imgsrc="hero.jpg"alt="Hero banner">
</body>
</html>
Validate at scale.
Ship accessible websites, faster.
Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.
Pro Trial
Full Pro access. Cancel anytime.
Start Pro Trial →Join teams across 40+ countries