rel
Defines the relationship between the current document and a linked resource. Controls security, performance, SEO, and resource loading.
Overview
The rel attribute defines the relationship between the current document and a linked resource. It is used on <a>, <link>, <area>, and <form> elements.
The value is a space-separated list of link types. Multiple values can be combined: rel="noopener noreferrer".
Security
Two values protect your site when linking to external origins.
| Value | Effect | Why it matters |
|---|---|---|
noopener |
The opened page cannot access window.opener |
Prevents the external page from navigating your tab to a phishing page or reading properties of your window |
noreferrer |
The browser does not send a Referer header |
Prevents leaking the current page URL (which may contain tokens, user IDs, or private paths) to the external site |
Best practice: Always use rel="noopener noreferrer" on external links with target="_blank". Modern browsers apply noopener by default for target="_blank", but adding it explicitly ensures consistent behavior across all browsers and clearly communicates intent.
Secure external links
<!-- External link: prevent window.opener and Referer leaks --><a href="https://example.com" rel="noopener noreferrer" target="_blank"> Visit Example</a> <!-- Multiple external links with security defaults --><nav> <a href="https://github.com/you" rel="noopener noreferrer" target="_blank">GitHub</a> <a href="https://twitter.com/you" rel="noopener noreferrer" target="_blank">Twitter</a></nav>Resource Hints
Resource hints tell the browser to prepare for future navigations or fetch critical resources early. They go on <link> elements in the <head>.
| Value | What it does | When to use |
|---|---|---|
preload |
Fetches a resource with high priority for the current page. Requires the as attribute. |
Fonts, hero images, critical scripts that the browser would discover late |
prefetch |
Fetches a resource at low priority for a future navigation | Next page the user is likely to visit, non-critical assets |
preconnect |
Performs DNS lookup, TCP handshake, and TLS negotiation to an origin | Third-party APIs, font providers, CDNs you will fetch from soon |
dns-prefetch |
Performs only the DNS lookup for an origin | Origins you might connect to. Lighter than preconnect, broader browser support. |
modulepreload |
Preloads an ES module and its dependencies, parsing the module graph | JavaScript modules critical to page rendering |
Resource hints
<!-- Preload a critical font (must be fetched before first paint) --><link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin /> <!-- Preload the LCP image --><link rel="preload" href="/images/hero.webp" as="image" /> <!-- Prefetch a page the user is likely to visit next --><link rel="prefetch" href="/checkout" /> <!-- Preconnect to a third-party origin (DNS + TCP + TLS) --><link rel="preconnect" href="https://api.example.com" /> <!-- DNS-prefetch only (lighter than preconnect) --><link rel="dns-prefetch" href="https://analytics.example.com" /> <!-- Modulepreload for ES modules --><link rel="modulepreload" href="/js/app.js" />preload vs prefetch
- preload is for resources needed on this page. The browser fetches them with high priority immediately.
- prefetch is for resources needed on a future page. The browser fetches them at idle time with low priority.
- Do not preload resources you will not use on the current page. The browser logs a console warning if a preloaded resource goes unused within a few seconds.
SEO and Navigation
Search engines use these values to understand site structure and content relationships.
| Value | Purpose | Used on |
|---|---|---|
canonical | Declares the authoritative URL when a page is accessible at multiple URLs | <link> |
alternate | Points to an alternative version (different language, format, or media) | <link> |
prev | Previous page in a paginated series | <link> |
next | Next page in a paginated series | <link> |
nofollow | Tells search engines not to follow the link for ranking purposes | <a> |
ugc | Marks a link as user-generated content | <a> |
sponsored | Marks a link as paid or sponsored | <a> |
Canonical and alternate URLs
<!-- Canonical URL: tell search engines which URL is authoritative --><link rel="canonical" href="https://example.com/blog/my-post" /> <!-- Alternate language versions --><link rel="alternate" hreflang="es" href="https://example.com/es/blog/mi-post" /><link rel="alternate" hreflang="fr" href="https://example.com/fr/blog/mon-article" /><link rel="alternate" hreflang="x-default" href="https://example.com/blog/my-post" /> <!-- RSS/Atom feed --><link rel="alternate" type="application/rss+xml" title="Blog Feed" href="/feed.xml" />Pagination
<!-- Pagination hints for search engines --><link rel="prev" href="/blog/page/2" /><link rel="next" href="/blog/page/4" />Nofollow and UGC links
<!-- Tell search engines not to follow this link --><a href="https://example.com/promo" rel="nofollow">Sponsored link</a> <!-- User-generated content: nofollow prevents SEO spam --><a href="https://user-submitted-link.com" rel="nofollow ugc"> User's website</a> <!-- Sponsored/paid link --><a href="https://advertiser.com" rel="sponsored">Our sponsor</a>Stylesheets and Icons
The most common rel values you will use daily.
| Value | Purpose |
|---|---|
stylesheet | Links an external CSS file. The most common rel value. |
icon | Favicon for the browser tab. SVG favicons support dark mode via prefers-color-scheme. |
apple-touch-icon | Home screen icon on iOS devices |
manifest | Web app manifest for PWA metadata |
Stylesheets and icons
<!-- Standard stylesheet --><link rel="stylesheet" href="/css/main.css" /> <!-- Print-only stylesheet --><link rel="stylesheet" href="/css/print.css" media="print" /> <!-- Favicon --><link rel="icon" href="/favicon.svg" type="image/svg+xml" /><link rel="icon" href="/favicon.ico" sizes="32x32" /> <!-- Apple touch icon --><link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <!-- Web app manifest --><link rel="manifest" href="/site.webmanifest" />rel on Forms
The rel attribute also works on <form> elements. When a form submits to an external origin, rel="noopener noreferrer" provides the same security protections as on links.
Form with rel
<!-- Form with rel for security --><form action="https://external-service.com/submit" method="post" rel="noopener noreferrer"> <label for="feedback">Feedback</label> <textarea id="feedback" name="feedback" rows="3"></textarea> <button type="submit">Send</button></form>Combining Values
The rel attribute accepts multiple space-separated values. This is how you combine security, SEO, or other relationship types on a single element.
| Combination | When to use |
|---|---|
rel="noopener noreferrer" | External links with target="_blank" |
rel="nofollow ugc" | User-generated external links |
rel="nofollow sponsored" | Paid or sponsored external links |
rel="noopener noreferrer nofollow" | Untrusted external links (open in new tab, no referrer, no SEO value) |
Practical Head Example
A well-structured <head> uses several rel values together to handle performance, styling, SEO, and icons.
Complete head example
<!-- A typical <head> using multiple rel values --><head> <meta charset="utf-8" /> <title>My Page</title> <!-- Security & performance --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" href="/fonts/heading.woff2" as="font" type="font/woff2" crossorigin /> <!-- Styles --> <link rel="stylesheet" href="/css/main.css" /> <!-- SEO --> <link rel="canonical" href="https://example.com/current-page" /> <link rel="alternate" type="application/rss+xml" href="/feed.xml" /> <!-- Icons --> <link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" /></head>