References

Beginner-friendly references for web development, with live, editable examples.

The HTML as attribute

Attribute All modern browsers Updated
Quick answer

The HTML as attribute tells the browser the type of resource being preloaded so it sets the right priority and CORS rules. It is used on the <link> element (with rel="preload" or rel="modulepreload").

Overview

The as attribute tells the browser the type of resource being preloaded so it sets the right priority and CORS rules. It applies to the <link> element (with rel="preload" or rel="modulepreload").

The as value is required for rel="preload" — without it the browser cannot prioritize the fetch correctly and may even double-download.

Syntax

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

Values

Value
script | style | image | font | fetch | document | audio | video | track | object | embed | worker

Best practices

  • Declare the character encoding with <meta charset="utf-8"> first in the <head>.
  • Load scripts with defer (or as modules) so they do not block parsing.
  • Protect third-party resources with integrity and crossorigin (Subresource Integrity).
  • Use resource hints like preload deliberately, paired with the right as value.

Frequently asked questions

What does the as attribute do?
Declares the type of a preloaded resource.
Where do head attributes apply?
On the metadata elements in the <head> — <meta>, <link>, <script> and <base>.
What is the difference between async and defer?
async runs a script as soon as it loads in no set order; defer runs scripts in order after the document is parsed.
Which elements use the as attribute?
It is an element-specific attribute, used on document head elements like <meta>, <link> and <script>.
alt async