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 arel="preload"orrel="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 theAcceptheader of the corresponding request. Alsorel="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 thecrossoriginattribute) -
font: CSS@font-face -
image:<img>and<picture>elements withsrcsetorimagesetattributes, SVG<image>elements, CSS*-imagerules -
object:<object>elements -
script:<script>elements, WorkerimportScripts -
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 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 HTTPOriginheader), avoiding its uncontaminated use. If invalid, it is handled as if the enumerated keywordanonymoushad been used. The allowed values are:-
anonymous: a cross-origin request is made (that is, with an HTTPOriginheader), but no credentials are sent (that is, no cookies, X.509 certificate, or HTTPBasicauthentication). If the server does not give credentials to the origin site (by not setting the HTTPAccess-Control-Allow-Originheader), the resource will be contaminated and its use restricted. -
use-credentials: a cross-origin request is made (that is, with an HTTPOriginheader) along with a submitted credential (that is, a cookie, certificate, and/or HTTPBasicauthentication is made). If the server does not provide credentials to the origin site (via the HTTPAccess-Control-Allow-Credentialsheader), the resource will be contaminated and its use restricted.
-
-
disabled: only forrel="stylesheet", it is a Boolean attribute that indicates if the stylesheet should be loaded and applied to the document. Ifdisabledis specified in the HTML the stylesheet will not load during page loading. Instead, the stylesheet will load on demand as long as thedisabledattribute is set tofalseor removed. Setting thedisabledproperty in the DOM causes the stylesheet to be removed from theDocument.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 thehrefattribute is also used. -
imagesizes: only forrel="preload"andas ="image", it is a sizes attribute that indicates the preload of the appropriate resource used by an<img>element with the corresponding values for itssrcsetandsizesattributes. -
imagesrcset: only forrel="preload"andas="image", it is a sourceset attribute that indicates the preload of the appropriate resource used by an<img>element with the corresponding values for itssrcsetandsizesattributes. -
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 (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-referrermeans that theReferer:header will not be sent. -
no-referrer-when-downgrademeans that theReferer: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 ofrelisiconor a non-standard one like Apple'sapple-touch-icon. Most icon formats can only store a single icon; therefore most of the time thesizesattribute 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 asimage/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. 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 astext/html,text/css, etc. It is often used to define the type of stylesheet referenced (such astext/css), but since CSS is the only style sheet language used it is not only possible to omit thetypeattribute but also in it is actually recommended to do so. It is also used withrel="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 (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)