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. 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="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
Acceptheader 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:
fetch: fetch, XHR (this value also requires
<link>to contain the
<link rel="stylesheet">elements, CSS
worker: Worker, SharedWorker
crossorigin: this enumerated attribute indicates when to use CORS to retrieve the resource. CORS-enabled images 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
Originheader), avoiding its uncontaminated use. If invalid, it is handled as if the enumerated keyword
anonymoushad been used. The allowed values are:
anonymous: a cross-origin request is made (that is, with an HTTP
Originheader), but no credentials are sent (that is, no cookies, X.509 certificate, or HTTP
Basicauthentication). If the server does not give credentials to the origin site (by not setting the HTTP
Access-Control-Allow-Originheader), the resource will be contaminated and its use restricted.
use-credentials: a cross-origin request is made (that is, with an HTTP
Originheader) along with a submitted credential (that is, a cookie, certificate, and/or HTTP
Basicauthentication is made). If the server does not provide credentials to the origin site (via the HTTP
Access-Control-Allow-Credentialsheader), 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
disabledis specified in the HTML the stylesheet will not load during page loading. Instead, the stylesheet will load on demand as long as the
disabledattribute is set to
falseor removed. Setting the
disabledproperty in the DOM causes the stylesheet to be removed from the
Document.styleSheetslist 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. This attribute should only be used if the
hrefattribute is also used.
imagesizes: only for
as ="image", it is a sizes attribute that indicates the preload of the appropriate resource used by an
<img>element with the corresponding values for its
imagesrcset: only for
as="image", it is a sourceset attribute that indicates the preload of the appropriate resource used by an
<img>element with the corresponding values for its
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. 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. Browsers that do not support CSS3 Media Queries may not recognize these links, so it is advisable to include fallback links that contain a value of those allowed by HTML4 (
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-referrermeans that the
Referer:header will not be sent.
no-referrer-when-downgrademeans 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.
originmeans that the referrer will be the origin of the page, that is, the schema, the host and the port.
origin-when-cross-originmeans 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-urlmeans 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 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
iconor 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
sizesattribute 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:
anymeans that the icon can be scaled to any size as it is in vector format, such as
- A space separated list of sizes, each in the format
<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. Using it incorrectly can cause the stylesheet to be ignored.
type: used to define the type of linked content. The attribute value must be a MIME type, such as
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
typeattribute 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.
<link> is used to load a favicon and our site uses a Content Security Policy (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
Top comments (0)