DEV Community

Cover image for HTML tags | link
Carlos Espada
Carlos Espada

Posted on • Edited on

HTML tags | link

#html #tags #link

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="preload" or rel="modulepreload" 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 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 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.
  • fetchpriority: provides a hint of the relative priority to use when fetching a resource of a particular type. It accepts these values:
    • high: fetch the resource at a high priority relative to other resources of the same type.
    • low: fetch the resource at a low priority relative to other resources of the same type.
    • auto: don't set a preference for the fetch priority. This is the default. It is used if no value or an invalid value is set.
  • 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 href attribute is also used.
  • imagesizes: only for rel="preload" and 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 srcset and sizes attributes.
  • imagesrcset: only for rel="preload" and as="image", it is a 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. It must only be specified when the rel attribute is stylesheet, preload, or modulepreload.
  • 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.
  • 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 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. 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/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 is actually now 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 (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 | Support

Top comments (0)