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.
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 |
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> |
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 |
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.
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.