HTML attribute: rel

Draft
This page is not complete.

The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.

The type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords, which are listed in the following table. Every keyword within a space seperated value should be unique within that value.

Values for the rel attribute, and the elements for which each is relevant
rel value Description <link> <a> and <area> <form>
alternate Alternate representations of the current document. Link Link Not allowed
author Author of the current document or article. Link Link Not allowed
bookmark Permalink for the nearest ancestor section. Not allowed Link Not allowed
canonical Preferred URL for the current document. Link Not allowed Not allowed
dns-prefetch Tells the browser to preemptively perform DNS resolution for the target resource's origin External Resource Not allowed Not allowed
external Referenced document is not part of the same site as the current document. Not allowed Annotation Annotation
help Link to context-sensitive help. Link Link Link
icon Icon representing the current document. External Resource Not allowed Not allowed
license Indicates that the main content of the current document is covered by the copyright license described by the referenced document. Link Link Link
modulepreload Tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well. External Resource Not allowed Not allowed
next Indicates that the current document is a part of a series, and that the next document in the series is the referenced document. Link Link Link
nofollow Indicates that the current document's original author or publisher does not endorse the referenced document. Not allowed Annotation Annotation
noopener Creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). Not allowed Annotation Annotation
noreferrer No Referer header will be included. Additionally, has the same effect as noopener. Not allowed Annotation Annotation
opener Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value). Not allowed Annotation Annotation
pingback Gives the address of the pingback server that handles pingbacks to the current document. External Resource Not allowed Not allowed
preconnect Specifies that the user agent should preemptively connect to the target resource's origin. External Resource Not allowed Not allowed
prefetch Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. External Resource Not allowed Not allowed
preload Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). External Resource Not allowed Not allowed
prerender Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future. External Resource Not allowed Not allowed
prev Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document. Link Link Link
search Gives a link to a resource that can be used to search through the current document and its related pages. Link Link Link
stylesheet Imports a style sheet. External Resource Not allowed Not allowed
tag Gives a tag (identified by the given address) that applies to the current document. Not allowed Link Not allowed

The rel attribute is relevant to the <link>, <a>, <area>, and <form> elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insenstive.

The rel attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on <link> and <form>, if the rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship.

Like all HTML keyword attribute values, these values are case-insenstive.

Values

If there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.

Note: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

alternate
Indicates an alternate representation of the current document. Valid for link, a, and area, the meaning depends on the values of the other attributes.
  • With the stylesheet keyword on a <link>, it creates an alternate stylesheet.
    <!-- a persistent style sheet -->
    <link rel="stylesheet" href="default.css">
    <!-- alternate style sheets -->
    <link rel="alternate stylesheet" href="highcontrast.css" title="High contrast">
  • With an hreflang attribute that differs from the document language, it indicates a translation.
  • With the type attribute, it indicates that the referenced document is the same content in a different format. For example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed.
    <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
  • Both the hreflang and type attributes specify links to versions of the document in an alternative format and language, intended for other media:
    <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
    <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">
author
Indicates the author of the current document or article. Relevant for <link>, <a>, and <area> elements, the author keyword creates a hyperlink. With <a> and <area>, it indicates the linked document (or mailto:) provides information about the author of the nearest <article> ancestor if there is one, otherwise the entire document. For <link>, it represents the author of the entire document.

Note: The obsolete rev="made" is treated as rel="alternate"

bookmark
Relevant as the rel attribute value for the <a> and <area> elements, the bookmark provides a permalink for ancestor section, which is the nearest ancestor <article> or <section>, if there is at least one, otherwise, the nearest heading sibling or ancestor descendant, to the next..
canonical
Valid for <link>, it defines the preferred URL for the current document, which is useful for search engines.
dns-prefetch
Relevant for the <link> element both in the <body> and <head>, it tells the browser to preemptively perform DNS resolution for the target resource's origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See dns-prefetch described in resource hints.
external
Relevant to <form>, <a>, and <area>, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site.
help
Relevant to <form>, <link>, <a>, and <area>, the help keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within <link>, the help is for the whole document. When included with <a> and <area> and supported, the default cursor will be help instead of pointer.
icon

Valid with <link>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.

The most common use for the icon value is the favicon:

<link rel="icon" href="favicon.ico">

If there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.

Note: Apple's iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder. Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

license

Valid on the <a>, <area>, <form>, <link> elements, the license value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the <head> element, the standard doesn't distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

<link rel="license" href="#license">

Note: Although recognized, the synonym copyright is incorrect and must be avoided.

modulepreload
Useful for improved performance, and relevant to the <link> anywhere in the document, setting rel="modulepreload" tells the browser to preemptively fetch the script (and dependencies) and store it in the document's module map for later evaluation. modulepreload links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See modulepreload for more information.
next
Relevant to <form>, <link>, <a>, and <area>, the next values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a <link&gr;, browsers may assume that document will be fetched next, and treat it as a resource hint.
nofollow
Relevant to <form>, <a>, and <area>, the nofollow keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document's owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages.
noopener
Relevant to <form>, <a>, and <area>, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). In other words, it makes the link behave as if window.opener were null and target="_parent" were set.

This is the opposite of opener.
noreferrer
Relevant to <form>, <a>, and <area>, including this value makes the referrer unknown (no Referer header will be included), and opens the creates a top-level browsing context, as if noopener were also set.
opener
Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context (i.e., has "_blank" as target attribute value). Effectively, the opposite of noopener.
pingback
Gives the address of the pingback server that handles pingbacks to the current document.
preconnect
Specifies that the user agent should preemptively connect to the target resource's origin.
prefetch
Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.
preload
Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination).
prerender
Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.
prev

Similar to the next keyword, relevant to <form>, <link>, <a>, and <area>, the prev values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document.

Note: The synonym previous is incorrect and should not be used.

search

Relevant to <form>, <link>, <a>, and <area> elements, the search keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.

If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.

stylesheet

Valid for the <link> element, it imports an external resource to be used as a stylesheet. The type attribute is not needed as it's a text/css stylesheet, as that is the default value. If it's not a stylesheet of type text/css it is best to declare the type.

While this attribute defines the link as being a stylesheet, the interaction with other attributes and other keyterms within the rel value impact whether the stylesheet is downloaded and / or used.

When used with the alternate keyword, it defines an alternative style sheet. In this case, include a non-empty title.

The external stylesheet will not be used or even downloaded if the media does not match the value of the media attribute.

See .... for more information

tag
Valid for the <a>, and <area> elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is locatated. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the tag value of the rel attribute is for a single document.

Non-standard values

apple-touch-icon-precomposed
 <!-- third-generation iPad with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
  <!-- iPhone with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png">
  <!-- first- and second-generation iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png">
  <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
  <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png">
  <!-- basic favicon -->
  <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png">

Browser compatibility

No compatibility data found. Please contribute data for "html.elements.attributes.rel" (depth: 1) to the MDN compatibility data repository.

Specifications

Specification Status Comment
HTML Living Standard
The definition of 'rel attribute' in that specification.
Living Standard Added opener. Made noopener default  for target="_blank".
HTML5
The definition of 'rel attribute' in that specification.
Recommendation Added tag, search, prefetch, noreferrer, nofollow, icon, and author.
Renamed copyright to license.
Removed start, chapter, section, subsection, and appendix
Preload
The definition of 'preload' in that specification.
Candidate Recommendation Added preload.
Resource Hints
The definition of 'preconnect' in that specification.
Working Draft Added dns-prefetch, preconnect, and prerender values.
HTML 4.01 Specification
The definition of 'link types' in that specification.
Recommendation Added alternate, stylesheet, start, chapter, section, subsection, appendix, and bookmark.
Renamed previous to prev.
Removed top, and search.
Unknown
The definition of '<link>' in that specification.

Unknown (Obsolete)

Added top, contents, index, glossary, copyright, next, previous, help, and search.
RFC 1866: HTML 2.0 Unknown(Obsolete) Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
relChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Alternative stylesheets.Chrome ? Edge ? Firefox Full support 3IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
dns-prefetch
Experimental
Chrome Full support 46Edge ? Firefox Full support 3IE ? Opera Full support 33Safari ? WebView Android Full support 46Chrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
manifest
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera No support NoSafari ? WebView Android Full support 39Chrome Android Full support 39Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0
modulepreload
Experimental
Chrome Full support 66Edge ? Firefox ? IE ? Opera Full support 53Safari ? WebView Android Full support 66Chrome Android Full support 66Firefox Android ? Opera Android Full support 47Safari iOS ? Samsung Internet Android Full support 9.0
noopener
Non-standard
Chrome Full support 49Edge No support NoFirefox Full support 52
Notes
Full support 52
Notes
Notes Prior to Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 52
Notes
Full support 52
Notes
Notes Prior to Firefox 63, rel="noopener" created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
Opera Android Full support 36Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
preconnect
Experimental
Chrome Full support 46Edge No support NoFirefox Full support 39
Notes
Full support 39
Notes
Notes Before Firefox 41, it doesn't obey the crossorigin attribute.
IE No support NoOpera Full support 33Safari No support NoWebView Android Full support 46Chrome Android Full support 42Firefox Android Full support 39
Notes
Full support 39
Notes
Notes Before Firefox 41, it doesn't obey the crossorigin attribute.
Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 4.0
prefetch
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
preload
Experimental
Chrome Full support 50Edge ? Firefox No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761).
IE ? Opera Full support 37Safari ? WebView Android Full support 50Chrome Android Full support 50Firefox Android No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761).
Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
prerender
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

Accessibility concerns

See also