HTML <link> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 3 min read

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/develop/web/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

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes