What is the difference between preload and prefetch?

rel=preload tells the browser to fetch a resource needed for the current navigation with high priority, requiring an as attribute. rel=prefetch fetches a low-priority resource likely needed for a future navigation. Preload is for now; prefetch is for next.

When should I use modulepreload?

Use rel=modulepreload for JavaScript modules you know will be imported, so the browser fetches, parses and compiles them ahead of time including their dependency graph. It is the module-aware counterpart to preload as=script and avoids the request waterfall of nested imports.

What does rel=canonical do?

rel=canonical names the preferred URL for duplicate or near-duplicate pages, helping search engines consolidate ranking signals onto one address. It does not redirect users; it is a hint placed in the head. Only one canonical per page is meaningful.

How do preconnect and dns-prefetch differ?

rel=dns-prefetch resolves a domain's DNS early. rel=preconnect goes further, also performing the TCP handshake and TLS negotiation, so the connection is warm when the first request fires. preconnect is more costly, so reserve it for origins you will definitely use soon.

Does rel accept multiple values?

Yes. The rel attribute is a space-separated list of link types, for example rel="alternate stylesheet" or rel="noopener noreferrer" on anchors. The browser applies all recognised relations; unknown tokens are ignored.

HTML <link> rel Values Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

HTML link relation types

The rel attribute on <link> declares the relationship between the document and a linked resource — from loading stylesheets and preloading assets to declaring canonical URLs and icons. This searchable reference lists the common rel values, what each does and the attributes they pair with.

How it works

A <link> element in the <head> connects the page to an external resource; rel names the kind of relationship and the browser acts accordingly:

<link rel="stylesheet" href="/main.css" />
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin />
<link rel="modulepreload" href="/app.js" />
<link rel="preconnect" href="https://cdn.example.com" />
<link rel="canonical" href="https://example.com/page" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

Resource-hint relations (preload, preconnect, dns-prefetch, prefetch, modulepreload) shape the loading priority and timing; semantic relations (canonical, alternate, manifest, icon, author) describe the page. The attribute is a space-separated list, so multiple relations can combine.

Tips and notes

preload requires an as value or the browser may double-fetch.
Cross-origin font preloads need crossorigin to match the actual request.
Use alternate with hreflang for localized variants and with type for feeds.
Keep one meaningful canonical per page; conflicting canonicals are ignored.