<link>
The <link> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <link> element creates a relationship between the current document and an external resource, such as a stylesheet or favicon. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | ≤4 | 18 | ≤3.2 | |
| HTML attribute | ||||||
as | 50 | 17 | 56 | 10 | 50 | 10 |
| The crossorigin attribute, valid on the audio, img, link, script, and video elements, provides support for CORS, defining how the element handles cross-origin requests, thereby enabling the configuration of the CORS requests for the element's fetched data. Depending on the element, the attribute can be a CORS settings attribute. | 34 | 17 | 18 | 10 | 34 | 10 |
disabled | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
href | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
hreflang | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match. | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
media | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| 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. | 1 | 12 | 1 | 1 | 18 | 1 |
sizes | 15 | 79 | 31 | 6 | 18 | 6 |
type | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| The HTMLLinkElement interface represents reference information for external resources and the relationship of those resources to a document and vice versa (corresponds to element; not to be confused with , which is represented by HTMLAnchorElement). This object inherits all of the properties and methods of the HTMLElement interface. | 1 | 12 | 1 | 1 | 18 | 1 |
| The as property of the HTMLLinkElement interface returns a string representing the type of content to be preloaded by a link element. | 50 | 17 | 56 | 10 | 50 | 10 |
| The crossOrigin property of the HTMLLinkElement interface specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the resource. | 34 | 17 | 18 | 10 | 34 | 10 |
| The disabled property of the HTMLLinkElement interface is a boolean value that represents whether the link is disabled. It only has an effect with style sheet links (rel property set to stylesheet). | 1 | 12 | 1 | 1 | 18 | 1 |
| The href property of the HTMLLinkElement interface contains a string that is the URL associated with the link. | 1 | 12 | 1 | 1 | 18 | 1 |
| The hreflang property of the HTMLLinkElement interface is used to indicate the language and the geographical targeting of a page. This hint can be used by browsers to select the more appropriate page or to improve SEO. | 1 | 12 | 1 | 1 | 18 | 1 |
| The integrity property of the HTMLLinkElement interface is a string containing inline metadata that a browser can use to verify that a fetched resource has been delivered without unexpected manipulation. | 45 | 17 | 43 | 11.1 | 45 | 11.3 |
| The media property of the HTMLLinkElement interface is a string representing a list of one or more media formats to which the resource applies. | 1 | 12 | 1 | 1 | 18 | 1 |
| The rel property of the HTMLLinkElement interface reflects the rel attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the link element and the current document. | 1 | 12 | 1 | 1 | 18 | 1 |
| The read-only relList property of the HTMLLinkElement returns a live DOMTokenList object containing the set of link types indicating the relationship between the resource represented by the link element and the current document. It reflects the link element's rel content attribute. | 50 | 17 | 30 | 9 | 50 | 9 |
| The read-only sizes property of the HTMLLinkElement interface defines the sizes of the icons for visual media contained in the resource. It reflects the link element's sizes attribute, which takes a list of space-separated sizes, each in the format x, or the keyword any. | 15 | 79 | 31 | 6 | 18 | 6 |
| The type property of the HTMLLinkElement interface is a string that reflects the MIME type of the linked resource. | 1 | 12 | 1 | 1 | 18 | 1 |
- Before Firefox 83, `crossorigin` is not supported for `rel="icon"`.
- In Chrome and other Blink-based browsers, adding the `disabled` attribute using JavaScript does not remove the stylesheet from `document.styleSheets`.
- Since Edge 79, adding the `disabled` attribute using JavaScript does not remove the stylesheet from `document.styleSheets`.
- In Chrome Android and other Blink-based browsers, adding the `disabled` attribute using JavaScript does not remove the stylesheet from `document.styleSheets`.
- In Chrome and other Blink-based browsers, adding the `disabled` attribute using JavaScript does not remove the stylesheet from `document.styleSheets`.
- Since Edge 79, adding the `disabled` attribute using JavaScript does not remove the stylesheet from `document.styleSheets`.
- In Chrome Android and other Blink-based browsers, adding the `disabled` attribute using JavaScript does not remove the stylesheet from `document.styleSheets`.
- Before Chrome 50, this property returned the deprecated child `DOMSettableTokenList` instead of `DOMTokenList`.
- Before Chrome Android 50, this property returned the deprecated child `DOMSettableTokenList` instead of `DOMTokenList`.
Syntax
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="canonical" href="https://example.com/page">Live demo
Common link relations
Use a table to compare the main rel values used in the document head.
Head resource links
Show how link elements usually connect a document to external metadata or resources.
Authoring notes
Pair each link relation with the kind of browser behavior it influences.
Use cases
Strengthen structure
Use <link> to make the document outline, grouping, or semantics more explicit.
Improve meaning
Apply <link> when clearer HTML structure helps users and tools understand the content.
Cautions
- Test <link> in your target browsers and input environments before depending on it as a primary behavior.
Accessibility
- Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.
Related links
Powered by web-features