HTML link relation types
The rel attribute on a <link> element declares the relationship between the current document and the linked resource. Different rel values trigger very different browser behaviour — from loading a stylesheet and warming a network connection to telling search engines which URL to consolidate. This reference covers the common values, what each actually does, and which companion attributes it needs to work correctly.
Two categories of rel value
It helps to think of link relations in two groups:
Resource hints and loading directives — these shape how and when the browser fetches assets, primarily for performance:
rel value | What it does |
|---|---|
preload | Fetch a resource needed for the current page with high priority. Requires as. |
modulepreload | Fetch, parse and compile a JS module (and its imports) ahead of time. |
prefetch | Low-priority fetch for a resource likely needed on the next navigation. |
preconnect | Open a TCP/TLS connection to an origin before the first request. |
dns-prefetch | Resolve a domain’s DNS early, without the full connection overhead. |
Semantic and metadata relations — these tell browsers, search engines and other tools what the linked resource is:
rel value | What it does |
|---|---|
stylesheet | Load the linked CSS and apply it to the page. |
canonical | Declare the preferred URL for this content (a search-engine hint). |
alternate | Signal an alternative version: a different language, format, or feed. |
icon | Link the page’s favicon or touch icon. |
manifest | Link the Web App Manifest for PWA installation. |
author | Link to information about the page’s author. |
Code examples with key attributes
<!-- Stylesheet — most common link element -->
<link rel="stylesheet" href="/main.css" />
<!-- Preload a web font — as and crossorigin are required -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin />
<!-- Modulepreload — fetches the module graph ahead of time -->
<link rel="modulepreload" href="/app.js" />
<!-- Preconnect to a CDN origin used on page load -->
<link rel="preconnect" href="https://cdn.example.com" />
<!-- DNS-prefetch for a non-critical third-party origin -->
<link rel="dns-prefetch" href="https://analytics.example.com" />
<!-- Canonical — point search engines to the preferred URL -->
<link rel="canonical" href="https://example.com/page" />
<!-- Alternate — RSS feed -->
<link rel="alternate" type="application/rss+xml" href="/feed.xml" title="Blog RSS" />
<!-- Alternate — localised version -->
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />
<!-- Icon — SVG favicon -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.webmanifest" />Common mistakes and precise rules
preload without as: If you omit the as attribute on a preload, the browser fetches at default priority and may fetch a second time when the resource is actually used — cancelling the performance benefit entirely.
Font preload missing crossorigin: Fonts are fetched with CORS. If you preload a font without crossorigin, the browser makes an anonymous request that is mismatched against the actual CORS-credentialed fetch, causing a double-fetch. Always add crossorigin to font preloads even for same-origin fonts.
preconnect overuse: Each preconnect holds a TCP connection open. Reserve it for origins the page definitively hits early (CDN, fonts, auth). For lower-certainty third parties, dns-prefetch has lower cost.
Multiple canonical tags: Only one canonical is meaningful per page. If two canonical links point to different URLs, search engines treat the signal as contradictory and may ignore both.
rel as a space-separated list: The attribute accepts multiple tokens — rel="alternate stylesheet" is valid and applies both relations simultaneously. This is uncommon but legitimate.