link element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The link element provides relational information about the document, like alternative versions, authors, copyright licences, icons, etc.

A link element must have either a rel attribute or an itemprop attribute, but never both. The href attribute is also mandatory.

When the itemprop attribute is absent, this element can only be declared in the head of the document. Otherwise it can be declared elsewhere.

When used in this element, the tilte attribute has a special meaning: it defines the title of the link in all cases with the exception of stylesheets, in which the attribute represents the name of a set of stylesheets to which this one belongs.

Examples

The following example povides information about the document using the link element with different link types.

<!DOCTYPE html>
<html>
  <head>
    <title>Movie "Star wars: A new hope"</title>
    <link rel="license" href="copyright.html">
    <link rel="next" href="the-empire-strikes-back.html">
    <link rel="search" href="movies-search.html">
    <link rel="alternate" hreflang="es" href="es/una-nueva-esperanza.html">
    <link rel="stylesheet" href="default.css">
    <link rel="stylesheet alternate" media="print" href="print.css">
    <link rel="icon" sizes="16x16" href="a-new-hope-16.png">
  </head>
  <body>
    <h1>A new hope</h1>
    <p>After the fall of democracy and the rise of the empire, hope has been lost...</p>
  </body>
</html>

Attributes

Specific attributes

href

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">

crossorigin

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">

rel

A 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 the following 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.
  • 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.
  • stylesheet: a stylesheets that defines styles for the current 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">

as

An enumerated value indicating the purpose that the linked resource will serve once retrieved. This attribute may take the following values:

  • document
  • embed
  • font
  • image
  • manifest
  • media
  • object
  • report
  • script
  • serviceworker
  • sharedworker
  • style
  • worker
  • xslt

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="media">

media

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">

nonce

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==">

integrity

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 value. In any other situation its use is invalid.

Example

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

hreflang

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">

type

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">

sizes

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 must only be declared when the rel attribute is present and it has the "icon" value. 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">

referrerpolicy

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">

charset

The character encoding of the target resource.

This attribute has become obsolete in HTML5 and its use is no longer valid. Authors are encouraged to use HTTP Content-Type headers to provide information about character sets in documents and other resources.

Example

<link rel="next" href="article2.html" charset="utf-8">

rev

The meaning of the current document (the one containing the link) for the linked resource.

This attribute became obsolete in HTML5 and its use is no longer valid. Authors are encouraged to replace it with the rel attribute.

Example

<link rev="index" href="article1.html">
<link rev="index" href="article2.html">
<link rev="index" href="article3.html">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.