HTML5 <link> Tag

The HTML <link> tag is used to specify relationships between the current document and an external resource. Possible uses for this element include defining a relational framework for navigation. This Element is most used to link to style sheets.

No content permitted inside the <link> tag as it is a void element. The start tag is mandatory for this element but there must be no closing tag. The parent of the <link> tag can be any element that accepts metadata elements.

The following style is applied to this element by default:

link {
  display: none;
}

Here is an example of using this tag:

<link href="style.css" rel="stylesheet">

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">

<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">

Attributes

crossorigin

This enumerated attribute indicates whether CORS must be used when fetching the related image. CORS-enabled images can be reused in the <canvas> element without being tainted. The allowed values are:

  • "anonymous": A cross-origin request (i.e. with Origin: HTTP header) is performed. But no credential is sent (i.e. no cookie, no X.509 certificate and no HTTP Basic authentication is sent). If the server does not give credentials to the origin site (by not setting the Access-Control-Allow-Origin: HTTP header) the image will be tainted and its usage restricted.
  • "use-credentials": A cross-origin request (i.e. with Origin: HTTP header) is performed with credential is sent (i.e. a cookie, a certificate and HTTP Basic authentication is performed). If the server does not give credentials to the origin site (through Access-Control-Allow-Credentials: HTTP header), the image will be tainted and its usage restricted.
    When not present, the resource is fetched without a CORS request (i.e. without sending the Origin: HTTP header), preventing its non-tainted used in elements. If invalid, it is handled as if the enumerated keyword anonymous was used. See CORS settings attributes for additional information.

href

This attribute specifies the URL of the linked resource. A URL might be absolute or relative.

hreflang

This attribute indicates the language of the linked resource. It is purely advisory. Allowed values are determined by BCP47. Use this attribute only if the href attribute is present.

integrity

Contains inline metadata, a base64-encoded cryptographic hash of a resource (file) you’re telling the browser to fetch, that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See Subresource Integrity.

media

This attribute specifies the media which the linked resource applies to. Its value must be a media query. This attribute is mainly useful when linking to external stylesheets by allowing the user agent to pick the best adapted one for the device it runs on.

In HTML 4, this can only be a simple white-space-separated list of media description literals, i.e., media types and groups, where defined and allowed as values for this attribute, such as print, screen, aural, braille. HTML5 extended this to any kind of media queries, which are a superset of the allowed values of HTML 4.

Browsers not supporting the CSS3 Media Queries won’t necessarily recognize the adequate link. do not forget to set fallback links, the restricted set of media queries defined in HTML 4.

prefetch

This attribute identifies a resource that might be required by the next navigation and that the user agent should retrieve it. This allows the user agent to respond faster when the resource is requested in the future.

referrerpolicy

A string indicating which referrer to use when fetching the resource:

  • 'no-referrer' This values means that the Referer header will not be sent.
  • 'no-referrer-when-downgrade' This values means that no Referer header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.
  • 'origin' This values means that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
  • 'origin-when-cross-origin' This values means that navigating to other origins will be limited to the scheme, the host and the port, while navigating on the same origin will include the referrer’s path.
  • 'unsafe-url' This values means that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

rel

This attribute names a relationship of the linked document to the current document. The attribute must be a space-separated list of the link types values. The most common use of this attribute is to specify a link to an external style sheet: the rel attribute is set to stylesheet, and the href attribute is set to the URL of an external style sheet to format the page. WebTV also supports the use of the value next for rel to preload the next page in a document series.

sizes

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains the icon link types value. It may have the following values:

Most icon format are only able to store one single icon; therefore most of the time the sizes contains only one entry. ICO being more ubiquitous, you should use it. Apple’s iOS does not support this attribute, hence Apple’s iPhone and iPad use special, non-standard link types values to define icon to be used as Web Clip or start-up placeholder: apple-touch-icon and apple-touch-startup-icon.

title

The title attribute has special semantics on the <link> element. When used on a <link rel="stylesheet"> it defines a preferred or an alternate stylesheet. Incorrectly using it may cause the stylesheet to be ignored.

type

This attribute is used to define the type of the content linked to. The value of the attribute should be a MIME type such as text/html, text/css, and so on. The common use of this attribute is to define the type of style sheet linked and the most common current value is text/css, which indicates a Cascading Style Sheet format.

Further Reading

  1. Read more about the HTML <link> element on MDN.
  2. You can also read the HTML <link> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top