This translation is incomplete. Please help translate this article from English.

The HTML <link> element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets.

To link an external stylesheet, you'd include a <link> element inside your <head> like this:

<link href="main.css" rel="stylesheet">

This simple example provides the path to the stylesheet inside an href attribute, and a rel attribute with a value of stylesheet. The rel stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing document. As you'll see from our Link types reference, there are many different kinds of relationship.

There are a number of other common types you'll come across. For example, a link to the site's favicon:

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

There are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.:

<link rel="apple-touch-icon-precomposed" sizes="114x114"
      href="apple-icon-114.png" type="image/png">

The sizes attribute indicates the icon size, while the type contains the MIME type of the resource being linked. These provide useful hints to allow the browser to choose the most appropriate icon available.

You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

Some interesting new performance and security features have been added to the <link> element too. Take this example:

<link rel="preload" href="myFont.woff2" as="font"
      type="font/woff2" crossorigin="anonymous">

A rel value of preload indicates that the browser should preload this resource (see Preloading content with rel="preload" for more details), with the as attribute indicating the specific class of content being fetched. The crossorigin attribute indicates whether the resource should be fetched with a CORS request.

Other usage notes:

  • A <link> element can occur either in the <head> or <body> element, depending on whether it has a link type that is body-ok. For example, the stylesheet link type is body-ok, and therefore a <link rel="stylesheet"> is permitted in the body. This isn't however best practice; it makes more sense to separate your <link> elements from your body content, putting them in your head.
  • The HTML and XHTML specifications define event handlers for the <link> element, but it is unclear how they would be used.
  • Under XHTML 1.0, empty elements such as <link> require a trailing slash: <link />.
  • WebTV supports the use of the value next for rel to preload the next page in a document series.

Attributes

This element includes the global attributes.

as
This attribute is only used when rel="preload" has been set on the <link> element. It specifies the type of content being loaded by the <link>, which is necessary for content prioritization, request matching, application of correct content security policy, and setting of correct Accept request header.
crossorigin
This enumerated attribute indicates whether CORS must be used when fetching the resource. CORS-enabled images can be reused in the <canvas> element without being tainted. The allowed values are:
"anonymous"
A cross-origin request (i.e. with an Origin HTTP header) is performed, but no credential is sent (i.e. no cookie, X.509 certificate, or HTTP Basic authentication). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin HTTP header) the image will be tainted and its usage restricted.
"use-credentials"
A cross-origin request (i.e. with an Origin HTTP header) is performed along with a credential sent (i.e. a cookie, certificate, and/or HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials HTTP header), the resource will be tainted and its usage restricted.
If the attribute is not present, the resource is fetched without a CORS request (i.e. without sending the Origin HTTP header), preventing its non-tainted usage. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.
href
This attribute specifies the URL of the linked resource. A URL can be absolute or relative.
hreflang
This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47. Use this attribute only if the href attribute is present.
integrity
Contains inline metadata — a base64-encoded cryptographic hash of the resource (file) you’re telling the browser to fetch. The browser can use this to verify that the fetched resource has been delivered free of unexpected manipulation. See Subresource Integrity.
media
This attribute specifies the media that the linked resource applies to. Its value must be a media type / media query. This attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.
Notes:
  • In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.
  • Browsers not supporting CSS3 Media Queries won't necessarily recognize the adequate link; do not forget to set fallback links, the restricted set of media queries defined in HTML 4.
referrerpolicy
A string indicating which referrer to use when fetching the resource:
  • 'no-referrer' means that the Referer header will not be sent.
  • 'no-referrer-when-downgrade' means that no Referer header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
  • 'origin' means that the referrer will be the origin of the page, which is roughly the scheme, the host, and the port.
  • 'origin-when-cross-origin' means that navigating to other origins will be limited to the scheme, the host, and the port, while navigating on the same origin will include the referrer's path.
  • 'unsafe-url' means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.
rel
This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values.
sizes
This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple's apple-touch-icon. It may have the following values:
  • any, meaning that the icon can be scaled to any size as it is in a vector format, like image/svg+xml.
  • a white-space separated list of sizes, each in the format <width in pixels>x<height in pixels> or <width in pixels>X<height in pixels>. Each of these sizes must be contained in the resource.
Note: Most icon formats are only able to store one single icon; therefore most of the time the sizes contains only one entry. MS's ICO format does, as well as Apple's ICNS. ICO is more ubiquitous; you should definitely use it.
title
The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a preferred or an alternate stylesheet. Incorrectly using it may cause the stylesheet to be ignored.
type
This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of stylesheet linked, e.g. text/css, although this is not so important any more as that is literally the only stylesheet type available. It is also used on rel="preload" link types, to make sure the browser only downloads file types that it supports.

Non-standard attributes

disabled
This attribute is used to disable a link relationship. In conjunction with scripting, this attribute could be used to turn on and off various style sheet relationships.

Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.

The use of disabled as an HTML attribute is non-standard and only used by some browsers (W3 #27677). Do not use it. Instead, you should use scripting to set the attribute directly, or set the disabled property of the StyleSheet DOM object.

methods
The value of this attribute provides information about the functions that might be performed on an object. The values generally are given by the HTTP protocol when it is used, but it might (for similar reasons as for the title attribute) be useful to include advisory information in advance in the link. For example, the browser might choose a different rendering of a link as a function of the methods specified; something that is searchable might get a different icon, or an outside link might render with an indication of leaving the current site. This attribute is not well understood nor supported, even by the defining browser, Internet Explorer 4.
prefetch
This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.
target
Defines the frame or window name that has the defined linking relationship or that will show the rendering of any linked resource.

Obsolete attributes

charset
This attribute defines the character encoding of the linked resource. The value is a space- and/or comma-delimited list of character sets as defined in RFC 2045. The default value is iso-8859-1.
Usage note: This attribute is obsolete and must not be used by authors. To achieve its effect, use the Content-Type HTTP header on the linked resource.
rev
The value of this attribute shows the relationship of the current document to the linked document, as defined by the href attribute. The attribute thus defines the reverse relationship compared to the value of the rel attribute. Link types values for the attribute are similar to the possible values for rel.
Usage note: This attribute is obsolete in HTML5. Do not use it. To achieve its effect, use the rel attribute with the opposite link types values, e.g. made should be replaced by author. Also this attribute doesn't mean revision and must not be used with a version number, which is unfortunately the case on numerous sites.
Note: Currently the W3C HTML 5.2 spec states that rev is no longer obsolete, whereas the WHATWG living standard still has it labeled obsolete. Until this discrepancy is resolved, you should still assume it is obsolete.

Styling with CSS

The <link> element has no visual presence on a web document, therefore it has no styling considerations to worry about.

Examples

Including a stylesheet

To include a stylesheet in a page, use the following syntax:

<link href="style.css" rel="stylesheet">

Providing alternative stylesheets

You can also specify alternative style sheets.

The user can choose which style sheet to use by choosing it from the View > Page Style menu. This provides a way for users to see multiple versions of a page.

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

Providing icons for different usage contexts

You can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as hints.

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

Conditionally loading resources with media queries

You can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="all">
<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)">
<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">

Stylesheet load events

You can determine when a style sheet has been loaded by watching for a load event to fire on it; similarly, you can detect if an error has occurred while processing a style sheet by watching for an error event:

<script>
var myStylesheet = document.querySelector('#my-stylesheet');

myStylesheet.onload = function() {
  // Do something interesting; the sheet has been loaded
}

myStylesheet.onerror = function() {
  console.log("An error occurred loading the stylesheet!");
}
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet">
Note: The load event fires once the stylesheet and all of its imported content has been loaded and parsed, and immediately before the styles start being applied to the content.

Preload examples

You can find a number of <link rel="preload"> examples in Preloading content with rel="preload".

Technical summary

Content categories Metadata content. If itemprop is present: flow content and phrasing content.
Permitted content None, it is an empty element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present
Permitted parents Any element that accepts metadata elements. If itemprop is present: any element that accepts phrasing content.
Permitted ARIA roles None
DOM interface HTMLLinkElement

Specifications

Specification Status Comment
Preload Candidate Recommendation Defines <link rel="preload">, and the as attribute.
Subresource Integrity
The definition of '<script>' in that specification.
Recommendation Added the integrity attribute.
HTML Living Standard
The definition of '<link>' in that specification.
Living Standard No changes from latest snapshot
HTML5
The definition of '<link>' in that specification.
Recommendation Added crossorigin and sizes attributes; extended values of media to any media queries; added numerous new values for rel.
HTML 4.01 Specification
The definition of '<link>' in that specification.
Recommendation  
Resource Hints
The definition of 'prefetch' in that specification.
Working Draft Added dns-prefetch, preconnect, prefetch, and prerender.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
charset
Deprecated
Chrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
crossoriginChrome Full support 25Edge No support NoFirefox Full support 18IE No support NoOpera Full support 15Safari ? WebView Android ? Chrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 18Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
disabled
DeprecatedNon-standard
Chrome No support NoEdge Full support YesFirefox No support NoIE Full support YesOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
hrefChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
hreflangChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
integrity
Experimental
Chrome Full support 45Edge No support NoFirefox ? IE No support NoOpera ? Safari No support NoWebView Android Full support 45Chrome Android Full support 45Edge Mobile No support NoFirefox Android ? Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 5.0
mediaChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
methods
DeprecatedNon-standard
Chrome No support NoEdge ? Firefox No support NoIE Full support 4Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile ? Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
prefetch
Experimental
Chrome Full support 56Edge ? Firefox ? IE No support NoOpera Full support 43Safari ? WebView Android Full support 56Chrome Android Full support 56Edge Mobile ? Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 6.0
referrerpolicyChrome Full support 51Edge No support NoFirefox Full support 50IE No support NoOpera Full support 38Safari Full support 11.1WebView Android Full support 51Chrome Android Full support 51Edge Mobile No support NoFirefox Android Full support 50Opera Android Full support 38Safari iOS No support NoSamsung Internet Android Full support 7.2
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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
rel: Alternative stylesheets.Chrome ? Edge ? Firefox Full support 3IE ? Opera Full support YesSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
rel.dns-prefetch
Experimental
Chrome Full support 46Edge ? Firefox Full support 3IE ? Opera ? Safari ? WebView Android Full support 46Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
rel.manifest
ExperimentalNon-standard
Chrome No support NoEdge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 39Chrome Android Full support 39Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0
rel.modulepreload
Experimental
Chrome Full support 66Edge ? Firefox ? IE ? Opera Full support 53Safari ? WebView Android Full support 66Chrome Android Full support 66Edge Mobile ? Firefox Android ? Opera Android Full support 53Safari iOS ? Samsung Internet Android ?
rel.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 49Edge Mobile No support NoFirefox 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 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
rel.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 ? Safari No support NoWebView Android Full support 46Chrome Android Full support 42Edge Mobile No support NoFirefox 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
rel.prefetch
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rel.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). An improved version that works for non-cacheable resources is expected to land soon.
IE ? Opera ? Safari ? WebView Android Full support 50Chrome Android Full support 50Edge Mobile ? Firefox Android No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761). An improved version that works for non-cacheable resources is expected to land soon.
Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
rel.prerender
Experimental
Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
revChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
sizes
Experimental
Chrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 441770.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 441770.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
target
Deprecated
Chrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
titleChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
typeChrome 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 YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

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.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

See also

Document Tags and Contributors

Contributors to this page: fabio.rahamim
Last updated by: fabio.rahamim,