HTML tags | link
Tags: html, tags, link
Published: 2021-10-25 06:29:48

It is used to **establish a relationship between the document and an external resource**. It is often used to add external style sheets, but also to load icons (such as the browser favicon or the app favicon on mobile devices), for example.

It can appear in the `<head>` or the `<body>`, depending on whether it is a type of link that is [body-ok](https://html.spec.whatwg.org/multipage/links.html#body-ok). For example, a `<link rel="stylesheet">` element is body-ok, and therefore may appear in the `<body>`, although this is not recommended.

**It is an empty element, therefore it only contains attributes**. In XHTML these elements must have a trailing slash `/>`, but not in HTML5.

It has the following attributes:
* `as`: only used when a `rel="preload"` or `rel="prefetch"` is specified in the `<link>` element. It specifies the type of content loaded by the link, and that is necessary to match the requests, apply the appropriate CSP and configure the `Accept` header of the corresponding request. Also `rel="preaload"` uses this attribute as a signal to prioritize the request. It can take these values ​​and apply to the following HTML elements:
  * `audio`: `<audio>` elements
  * `document`: `<iframe>` and `<frame>` elements
  * `embed`: `<embed>` elements
  * `fetch`: fetch, XHR (this value also requires `<link>` to contain the `crossorigin` attribute)
  * `font`: CSS `@font-face`
  * `image`: `<img>` and `<picture>` elements with `srcset` or `imageset` attributes, SVG `<image>` elements, CSS `*-image` rules
  * `object`: `<object>` elements
  * `script`: `<script>` elements, Worker `importScripts`
  * `style`: `<link rel="stylesheet">` elements, CSS `@import`
  * `track`: `<track>` elements
  * `video`: `<video>` elements
  * `worker`: Worker, SharedWorker
* `crossorigin`: this enumerated attribute indicates when to use [CORS](https://developer.mozilla.org/en-US/docs/Glossary/CORS) to retrieve the resource. [CORS-enabled images](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) can be reused in the `<canvas>` element without being contaminated. If the attribute is not present, the resource is retrieved without a CORS request (that is, without sending the HTTP `Origin` header), avoiding its uncontaminated use. If invalid, it is handled as if the enumerated keyword `anonymous` had been used. The allowed values ​​are:
  * `anonymous`: a cross-origin request is made (that is, with an HTTP `Origin` header), but no credentials are sent (that is, no cookies, X.509 certificate, or HTTP `Basic` authentication). If the server does not give credentials to the origin site (by not setting the HTTP `Access-Control-Allow-Origin` header), the resource will be contaminated and its use restricted.
  * `use-credentials`: a cross-origin request is made (that is, with an HTTP `Origin` header) along with a submitted credential (that is, a cookie, certificate, and/or HTTP `Basic` authentication is made). If the server does not provide credentials to the origin site (via the HTTP `Access-Control-Allow-Credentials` header), the resource will be contaminated and its use restricted.
* `disabled`: only for `rel="stylesheet"`, it is a Boolean attribute that indicates if the stylesheet should be loaded and applied to the document. If `disabled` is specified in the HTML the stylesheet will not load during page loading. Instead, the stylesheet will load on demand as long as the `disabled` attribute is set to `false` or removed. Setting the `disabled` property in the DOM causes the stylesheet to be removed from the `Document.styleSheets` list in the document.
* `href`: specifies the URL of the linked resource. It can be relative or absolute.
* `hreflang`: indicates the language of the linked resource. It is purely informative. Allowed values ​​are determined by [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt). This attribute should only be used if the `href` attribute is also used.
* `imagesizes`: only for `rel="preload"` and `as ="image"`, it is a [sizes attribute](https://html.spec.whatwg.org/multipage/images.html#sizes-attribute) that indicates the preload of the appropriate resource used by an `<img>` element with the corresponding values ​​for its `srcset` and `sizes` attributes.
* `imagesrcset`: only for `rel="preload"` and `as="image"`, it is a [sourceset attribute](https://html.spec.whatwg.org/multipage/images.html#srcset-attribute) that indicates the preload of the appropriate resource used by an `<img>` element with the corresponding values ​​for its `srcset` and `sizes` attributes.
* `integrity`: contains inline metadata, a base64-encoded cryptographic hash of the file requested by the browser used to verify that the fetched resource was delivered without unexpected manipulations.
* `media`: specifies the media to which the linked resource applies. Its value must be a media type/[media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). It is especially useful when linking to external style sheets, as it allows the browser to choose the one that best suits the device it is running on. HTML5 extended the existing values ​​in HTML4 to any kind of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries). Browsers that do not support [CSS3 Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) may not recognize these links, so it is advisable to include fallback links that contain a value of those allowed by HTML4 (`print`, `screen`, `aural`, `braille`, etc).
* `prefetch`: identifies a resource that can be requested in the next navigation and that the browser should retrieve. This allows the browser to respond more quickly when the resource is requested in the future.
* `referrerpolicy`: a string indicating which referrer to use when the resource is retrieved:
  * `no-referrer` means that the `Referer:` header will not be sent.
  * `no-referrer-when-downgrade` means that the `Referer:` header will not be sent when navigating to a non-TLS (HTTPS) origin. It is the default value if no other policy is specified.
  * `origin` means that the referrer will be the origin of the page, that is, the schema, the host and the port.
  * `origin-when-cross-origin` means that navigation to other origins will be limited to schema, host, and port. while navigations to the same origin will include the referrer's route.
  * `unsafe-url` means that the referrer will include the origin and path (but not the fragment, username or password). This case is not secure because it can filter TLS-protected sources and resource paths to insecure sources.
* `rel`: specifies the relationship of the linked document to the current document. The value is a space separated list of [link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) values.
* `sizes`: defines the sizes of the icons for the visual media contained in the resource. It should only be present if the value of `rel` is `icon` or a non-standard one like Apple's `apple-touch-icon`. Most icon formats can only store a single icon; therefore most of the time the `sizes` attribute contains only one entry. This is the case with the MS ICO format and Apple's ICNS. ICO is much more widespread, so this format should be used if you want to maximize cross-browser compatibility (especially for older versions of IE). It can have the following values:
  * `any` means that the icon can be scaled to any size as it is in vector format, such as `image/svg+xml`.
  * A space separated list of sizes, each in the format `<width>x<height>` or `<width>X<height>`, all units being in pixels. Each of these sizes must be included in the resource.
* `title`: this attribute has special semantics in the `<link>` element. When used in `<link rel="stylesheet">` defines a [preferred or alternate stylesheet](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets). Using it incorrectly can cause [the stylesheet to be ignored](https://developer.mozilla.org/en-US/docs/Correctly_Using_Titles_With_External_Stylesheets).
* `type`: used to define the type of linked content. The attribute value must be a MIME type, such as `text/html`, `text/css`, etc. It is often used to define the type of stylesheet referenced (such as `text/css`), but since CSS is the only style sheet language used it is not only possible to omit the `type` attribute but also in it is actually recommended to do so. It is also used with `rel="preload"` to ensure that the browser only downloads file types that it supports.

If `<link>` is used to load a favicon and our site uses a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) to improve security, the policy also applies to the favicon. If it does not load, check that the `img-src` directive in the `Content-Security-Policy` header allows access to it.

WebTV supports the use of `rel="next"` to preload the next page in a set of documents.

- Type: *none*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) | [Support](https://caniuse.com/mdn-html_elements_link)