<link> - HTML link Tag

Definition

The <link> tag specifies the relationship between the current document and an external resource, such as Javascript files, stylesheets, font files, a preferred version of the page, and more.

Examples

<!DOCTYPE html>
<html>
<head>
    <link href="http://www.thewebmaster.com/styles.css" rel="stylesheet">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <link rel="preload" href="https://fonts.gstatic.com/s/inter/v2.woff2"
    as="font" type="font/woff2" crossorigin="">
    <link rel="canonical" href="http://www.thewebmaster.com/html/tags/li/">
    <title>HTML Title Element goes here.</title>
</head>
<body>
    <h1>Displayed Page Title</h1>
    <p>The main content of your page goes here.</p>
</body>
</html>

Usage

The '<link> element is an empty element. It only contains attributes. There is no closing tag.
A <link> element should contain a link to the external resource using the href attribute, along with the name of the relationship between the document and that external resource using the rel attribute. The attributes required depend on the purpose of the <link> element.
The <link> element can be used for many purposes, for example:
- Loading stylesheets.
- Loading JavaScript files for your site.
- Preloading fonts for better site performance.
- Setting the canonical or preferred version of your page for Search Engine purposes.
- Detailing links to other versions of your page, for example, other language versions.
- Providing favicons.
- And more.

Attributes

The <link> element supports the Global Attributes, as well as the following:

crossorigin

The crossorigin attribute specifies how the element deals with cross-origin requests.

Values can include:

anonymous
use-credentials
href
The href attribute specifies the URL of the linked document.
hreflang
The hreflang attribute specifies the language of the linked document.
media
The media attribute specifies the media or device the target document is optimized for.
referrerpolicy
The referrerpolicy attribute specifies the referrer information that you wish to send with the link.
Values can include:
- no-referrer
- no-referrer-when-downgrade
- origin
- origin-when-cross-origin
- same-origin
- no-referrer-when-downgrade
- strict-origin-when-cross-origin
- unsafe-url
rel
The rel attribute specifies the relationship between the current and linked document.
Values can include:
- alternate
- author
- canonical
- dns-prefetch
- help
- icon
- license
- next
- pingback
- preconnect
- prefetch
- preload
- prerender
- prev
- search
- stylesheet
sizes
The sizes attribute specifies the linked resource’s height and width for the rel=icon attribute value pair.
title
The title attribute has a particular context when used on <link> elements. Firefox allows you to name alternate stylesheets that can be selected in Firefox via the View -> Page Style submenu. You can view an example of this in action here.
type
The type attribute specifies the media type of the linked document.

Specification

Browser Support

Desktop

Chrome	Edge	Firefox	IE	Opera	Safari
Yes	Yes	Yes	Yes	Yes	Yes

Mobile

Android Webview	Chrome Android	Firefox Android	Opera Android	iOS Safari	Samsung Internet
Yes	Yes	Yes	Yes	Yes	Yes

HTML <Link> Tag

Definition

Examples

Usage

Attributes

`crossorigin`

`href`

`hreflang`

`media`

`referrerpolicy`

`rel`

`sizes`

`title`

`type`

Specification

Browser Support

Desktop

Mobile