- HTML rel Attribute
- Browser Support
- Syntax
- Attribute Values
- More Examples
- Example
- This is a Heading
- HTML attribute: rel
- Values
- Non-standard values
- Specifications
- Browser compatibility
- html.elements.link.rel
- html.elements.a.rel
- html.elements.area.rel
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
HTML rel Attribute
The required rel attribute specifies the relationship between the current document and the linked document/resource.
Browser Support
Syntax
Attribute Values
| Value | Description |
|---|---|
| alternate | Provides a link to an alternate version of the document (i.e. print page, translated or mirror). Example: |
| author | Provides a link to the author of the document |
| dns-prefetch | Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin |
| help | Provides a link to a help document. Example: |
| icon | Imports an icon to represent the document. Example: |
| license | Provides a link to copyright information for the document |
| next | Provides a link to the next document in the series |
| pingback | Provides the address of the pingback server that handles pingbacks to the current document |
| preconnect | Specifies that the browser should preemptively connect to the target resource’s origin. |
| prefetch | Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation |
| preload | Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the «as» attribute (and the priority associated with that destination). |
| prerender | Specifies that the browser should pre-render (load) the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load (because the page is already loaded). Warning! This wastes the user’s bandwidth! Only use prerender if you are absolutely sure that the webpage is required at some point in the user’s journey |
| prev | Indicates that the document is a part of a series, and that the previous document in the series is the referenced document |
| search | Provides a link to a resource that can be used to search through the current document and its related pages. |
| stylesheet | Imports a style sheet |
More Examples
Example
Here is how to add a favicon to a website:
This is a Heading
This is a paragraph.
HTML attribute: rel
The rel attribute defines the relationship between a linked resource and the current document. Valid on , , , and , 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. Differently from a class name, which does not express semantics, the rel attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of the rel attribute are the IANA link relation registry, the HTML Living Standard, and the freely-editable existing-rel-values page in the microformats wiki, as suggested by the Living Standard. If a rel attribute not present in one of the three sources above is used some HTML validators (such as the W3C Markup Validation Service) will generate a warning.
The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.
| rel value | Description | and | ||
|---|---|---|---|---|
| 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 | The 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 | An 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 |
| manifest | Web app manifest. | Link | Not allowed | Not allowed |
| me | Indicates that the current document represents the person who owns the linked content. | Link | Link | Not allowed |
| 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 an auxiliary 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 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 and , 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. and will still created links, but without a defined relationship.
Values
Indicates an alternate representation of the current document. Valid for , , and , the meaning depends on the values of the other attributes.
link rel="stylesheet" href="default.css" /> link rel="alternate stylesheet" href="highcontrast.css" title="High contrast" /> link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog" /> - If hreflang is given alongside alternate , and the value of hreflang is different from the current document’s language, it indicates that the referenced document is a translation.
- If type is given alongside alternate , it indicates that the referenced document is an alternative format (such as a PDF).
- The hreflang and type attributes may both be given alongside alternate .
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" />
Indicates the referenced document provides further information about the author of the current document or article. Relevant for , , and elements.
Note: For historical reasons, the obsolete attribute value rev=»made» is treated as rel=»author» .
The most common use for the icon value is the favicon:
link rel="icon" href="favicon.ico" /> If there are multiple s, the browser uses their media , 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: The crossorigin attribute is not supported for rel=»icon» in Chromium-based browsers. See the open Chromium issue.
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.
Note: 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.
link rel="license" href="#license" /> Note: Although recognized, the synonym copyright is incorrect and must be avoided.
Web app manifest. Requires the use of the CORS protocol for cross-origin fetching.
Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has » _blank » as target attribute value). Effectively, the opposite of noopener.
Gives the address of the pingback server that handles pingbacks to the current document. See the Pingback specification.
Provides a hint to the browser suggesting that it open a connection to the linked website in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.
Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation. See prefetch for more information.
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). See the page for the preload value.
prerender Deprecated Non-standard
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, for example by fetching its subresources or performing some rendering.
Note: The synonym previous is incorrect and should not be used.
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 Firefox.
Valid for the 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 key terms 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.
Requires the use of the CORS protocol for cross-origin fetching.
Non-standard values
Specifies the icon for a web application on an iOS device.
Specifications
Browser compatibility
html.elements.link.rel
BCD tables only load in the browser
html.elements.a.rel
BCD tables only load in the browser
html.elements.area.rel
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jun 30, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.