link element

The address (URI) of the linked resource resource. This attribute represents the heart of link, and tells browser where to go when the link is followed.

The presence of this attribute is mandatory. When this attribute is absent or has a value that isn't a valid URI, the element doesn't define a link.

Example

<link rel="stylesheet" href="../styles/default.css">

An enumerated value indicating if the request made to the external server should present CORS credentials or not. The two possible values are (case-insensitive):

• anonymous: CORS requests for the element will have the "omit credentials" flag set.
• use-credentials: CORS requests for the element won't have the "omit credentials" flag set.

Example

<link rel="icon" href="http://www.otherserver.com/icons/default.png" crossorigin="anonymous">

An unordered set of unique space-separated list of link types, indicating the meaning that the linked resource has for the current document (the one containing the link). This attribute may take, among others, the following standard values:

• alternate: an alternate representation for the current document.
• author: a link to the author of the current document or article.
• dns-prefetch: the browser should preemptively perform DNS resolution for the target resource.
• help: a link to context-sensitive help.
• icon: an icon to represent the current document.
• modulepreload: the browser must preemptively fetch the module script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well.
• license: a description of a copyright license that covers the main content of the current document.
• next: the next document in a series of documents.
• pingback: the address of the pingback server that handles pingbacks to the current document.
• preconnect: the browser should preemptively connect to the target resource.
• prefetch: the browser should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.
• preload: the browser must preemptively fetch and cache the target resource for current navigation according to the destination given by the as attribute.
• prerender: the browser should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.
• prev: the previous document in a series of documents.
• search: a link to a resource that can be used to search through the current document and its related pages.
• serviceworker: a service worker registration.
• stylesheet: a stylesheets that defines styles for the current document.

Extensions to the predefined set of link types can be registered in the microformats wiki existing-rel-values page. Some of the extended link types are cited in this document.

A link element must have either a rel attribute or an itemprop attribute, but never both.

Example

<link rel="prev" href="article1.html">
<link rel="next" href="article3.html">
<link rel="license" href="copyright.html">
<link rel="alternate" href="spanish-version.html" hreflang="es">

A media query list indicating the media types (and their characteristics) for which the linked resource was designed. For example, a document or resource could be optimized for printing (less color, images and backgrounds), a mobile device or a regular screen. The defaut value is "all".

Example

<link rel="alternate" href="printer-version.html" media="print">

A cryptographic nonce ("number used once") which can be used by Content Security Policy to determine whether or not an external resource specified by the link will be loaded and applied to the document.

Example

<link rel="search" href="search.php" nonce="aHR0cDovL2h0bWxxdWljay5jb20vcy5waHANCg==">

A cryptographic representation of the linked resource that allows browsers to check that the resource retrieved wasn't tampered.

This attribute must only be declared when the rel attribute is present and it has the stylesheet, preload or modulepreload value. In any other situation its use is invalid.

Example

<link rel="stylesheet" href="main.css" integrity="sha384-aHR0cDovL2h0bWxxdWljay5jb20vc2VhcmNoLnBocA0K">

The language that's expected to be used in the linked resource (the one specified in the href attribute).

Example

<link rel="alternate" hreflang="es" href="spanish-version.html">

The content type (or Internet Media Type) that the linked resource is expected to have.

Example

<link rel="icon" href="icon.png" type="image/png">
<link rel="next" href="article2.html" type="text/html">

Sets the referrer policy used when processing the element's attributes, which involves what information is sent about the referrer in a request to another resource. It may contain any of the following values:

• no-referrer: No information about the referrer is sent in all requests.
• no-referrer-when-downgrade: A full URL is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
• same-origin: A full URL is sent only in requests made in the same origin.
• origin: A URL composed by protocol, host and port is sent in all requests.
• strict-origin: A URL composed by protocol, host and port is sent only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
• origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests.
• strict-origin-when-cross-origin: A full URL is sent in requests made in the same origin and a URL composed by protocol, host and port is sent in cross-origin requests, only in requests from a TLS-protected enviroment (HTTPS) to a potentially thrusworthy URL and from a not TLS-protected enviroment to anywhere.
• unsafe-url: A full URL is sent in all request.

Note: When the empty string is specified, the value no-referrer is assumed.

Example

<link rel="license" src="https://creativecommons.org/publicdomain/zero/1.0/" referrerpolicy="unsafe-url">

A space-separated list with sizes for which the linked icon has been designed. Each size can be composed by a string of two integers separated by the letter "x", or by the special keyword "any", which represents all posible sizes (this is ideal for SVG icons). Every value is case-insensitive.

This attribute can only be declared when the rel attribute is present and it has the "icon" value or the registered extension "apple-touch-icon". In any other situation its use is invalid.

Example

<link rel="icon" href="icon.ico" sizes="64x64 32x32 16x16">
<link rel="icon" href="icon.svg" sizes="any">

A list of image candidate strings separated from each other by commas (","). Each one of the elements in this list represent an alternative to the original image (specified in the href attribute), designded specifically for medias with a particular screen size or pixel density (for example, devices with reduced screens, like cellphones). An image candidate string must be composed by:

1. Zero or more space characters (" ").
2. The URL of the image resource.
3. Zero or more space characters (" ").
4. Optionally, one of the following:
   • A width descriptor with the following structure:
     1. A space character (" ").
     2. A non-negative integer representing the with of the resource.
     3. A lowercase letter W ("w").
   • A pixel density descriptor with the following structure:
     1. A space character (" ").
     2. A non-negative floating-point number representing the pixel density of the resource.
     3. A lowercase letter X ("x").

If one image candidate string has a width descriptor, then all image candidate strings must have the width descriptor specified. Moreover, the presence of a image candidate strings with a width descriptor implies that the presence of the sizes attribute is required.

There mustn't be two image candidate strings with the same descriptors in the element. An image candidate string with no descriptors is equivalent to an image candidate string with a "1x" pixel density descriptor.

This attribute has been recently introduced in HTML5. Authors are adviced to expect little browser support for its features.

This attribute is intended for links poining to images (more specifically, icons) that need to adapt to the divice display.

Example

<link rel="icon" href="icon.png" srcset="icon-big.png 640w, icon.png 300w, icon-small.png 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">

A comma-separated list of valid source sizes. Each source size (with exception of the last one) must be composed by:

1. Optionally:
   1. A media query condition indicating in which cases this size is to be applied.
   2. A space character (" ").
2. The width the image will take in CSS units.

The last source size must only be composed by the width of the image in CSS units, and will be used by browser as the default.

Supporting browsers will pick among the images provided in the srcset attribute, the one that best fits in the configuration of the device where it must be shown in, taking into account the information in this attribute. This method has been designed to simplify the task of providing images in responsive layouts and relies on the browser to choose the most appropriate image to display under the current conditions.

This attribute can only be declared if the srcset attribute is present and has at least one image resource with a width descriptor.

This attribute is intended for links poining to images (more specifically, icons) that need to adapt to the divice display.

Example

<link rel="icon" href="icon.png" srcset="icon-big.png 640w, icon.png 300w, icon-small.png 100w" sizes="(min-width: 75em) 25vw, (max-width: 20em) 80vw, 50vw">

An enumerated value indicating the purpose that the linked resource will serve once retrieved. This attribute may take any of the following case-insensitive values: "fetch", "audio", "document", "embed", "font", "image", "manifest", "object", "report", "script", "serviceworker", "sharedworker", "style", "track", "video", "worker" and "xslt". There's no default value for this attribute.

The as attribute can only be declared when the rel attribute is present and it contains the value preload.

Example

<link rel="preload" href="background-music.ogg" as="audio">

A color to be used as a suggestion, that browsers may use to customize the icon view when the user pins a website.

This attribute can only be declared when the rel attribute is present and it has the "mask-icon" value (extended link type). In any other situation its use is invalid.

Example

<link rel="mask-icon" color="#8800FF">

A boolean value indicating whether the stylesheet referenced by this element should be applied or not.

This attribute can only be declared when the rel attribute is present and it has the "stylesheet" value. In any other situation its use is invalid.

If this attribute is programmatically added/removed once the page is loaded, the styles in the referenced stylesheet will be applied/removed from the page.

Example

<link rel="stylesheet" href="alternate-styles.css" disabled>