Links do more than move people between pages. The HTML rel attribute describes the relationship between your page and another resource. The value preload means: requests an important resource for the current page early.
What preload means
Requests an important resource for the current page early.
Write it as rel="preload" on an appropriate <a> or <link> element. Not every relationship is defined for both: the correct element depends on the link type.
Example markup
<!-- Relationship: preload -->
<link rel="preload" as="image" href="hero.webp">What the browser does
This example uses <link>, which normally belongs in the document head and describes a resource relationship without adding a visible clickable link.
Supply a correct as value; unused preloads can waste bytes and cause warnings.
If preloading fonts, consider type, as and crossorigin: a mismatch may trigger a second download.
If the token is a resource-loading hint, it may improve a particular loading path, but the browser is free to make its own decision. Measure with the Network panel rather than adding hints to every resource.
When to choose this token
Use preload only when the relationship is genuinely true for that destination. If it describes a web resource, make sure that resource exists and serves the right content. For an external URL, do not confuse a relationship hint with permission, security or a redirect.
Small practice task
Create a simple test page with the example. Inspect the resulting element in Developer Tools. Change the target to another sensible file or URL, then explain whether the visible page, a network request, or only the relationship metadata changed.
Common Beginner Mistakes
- Supply a correct as value; unused preloads can waste bytes and cause warnings.
- Assuming
rel="preload"has the same effect on every kind of HTML link. - Adding a relationship token when the destination does not have that relationship.
Key Takeaways
preloadmeans requests an important resource for the current page early.- Supply a correct as value; unused preloads can waste bytes and cause warnings.
- Choose a valid link element and test what the browser actually does.