HTML <link> Tag

The <link> tag defines the relationship between the current document and an external resource. Its most common job is linking an external CSS stylesheet, but it is also how you attach a favicon, declare translated versions of a page, and hint to the browser which resources to fetch early for better performance.

This page covers the syntax of <link>, every attribute it accepts, and worked examples for the rel values you will reach for most often: stylesheet, icon, preload, and alternate. It also explains the resource-hint family (preload, prefetch, preconnect, dns-prefetch) and the crossorigin / integrity security attributes.

Note that <link> does not load scripts — that is the job of the <script> tag. The one exception is rel="modulepreload", which only pre-fetches a JavaScript module so it is ready when a <script> later requests it.

An HTML document can contain several <link> elements for different resource types, such as stylesheets, icons, and preloaded content. All of them belong in the <head> section of the document, typically before the closing </head> tag.

Syntax

The <link> tag is empty, which means that the closing tag isn’t required. It contains only attributes. But in XHTML, the <link> tag must be closed (<link/>).

Example of the HTML `<link>` tag:

HTML <link> Tag

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
    <p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
  </body>
</html>

Try it Yourself »

In this example the page has no styling of its own. Every rule that controls how the heading and paragraph look lives in the external style.css file, which the <link> element pulls in. Open the live editor above and edit style.css to see the changes apply to the markup.

Linking a favicon

A favicon is the small icon shown on the browser tab and in bookmarks. You declare it with rel="icon". The type attribute tells the browser the image format, and sizes lets you offer several resolutions so the browser can pick the best one.

<head>
  <!-- A standard favicon -->
  <link rel="icon" href="/favicon.ico" sizes="any" />

  <!-- A modern SVG icon (scales to any resolution) -->
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />

  <!-- A PNG at a specific size -->
  <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png" />

  <!-- Icon used when the page is added to an iOS home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

sizes="any" marks a scalable icon (such as .ico or .svg); otherwise use WIDTHxHEIGHT (for example 32x32) per file.

Preloading resources with `rel="preload"`

rel="preload" tells the browser to fetch a resource early, with high priority, before the parser would normally discover it. It does not apply the resource — it only downloads it so the file is already cached when it is needed.

When you use preload, the as attribute is required. It tells the browser the resource type so it can set the correct priority, apply the right Accept header, and trigger the proper CORS and Content-Security-Policy checks.

<head>
  <!-- Preload a stylesheet -->
  <link rel="preload" href="/main.css" as="style" />

  <!-- Preload a font (fonts are always fetched with CORS, so crossorigin is required) -->
  <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />

  <!-- Preload an image that is the page's largest element -->
  <link rel="preload" href="/hero.jpg" as="image" />
</head>

A preloaded stylesheet still needs a normal rel="stylesheet" link (or a <style>/@import) to actually be applied to the page — preload alone only downloads it.

Resource hints: preload vs prefetch vs preconnect vs dns-prefetch

These four rel values all help performance, but they solve different problems and are not interchangeable:

`rel` value	What it does	Use it for
`preload`	Downloads a resource the current page needs soon, at high priority.	Critical CSS, fonts, the LCP image — files that would otherwise be discovered late.
`prefetch`	Downloads a resource a future navigation is likely to need, at low priority.	Assets for the next page the user will probably visit.
`preconnect`	Opens the connection (DNS + TCP + TLS handshake) to a different origin in advance.	Origins you will definitely request from soon, such as a font or API host.
`dns-prefetch`	Resolves only the DNS for an origin. Cheaper than `preconnect`, and a good fallback.	Origins you might use, or as a companion to `preconnect` for older browsers.

<head>
  <!-- Open the connection to the font host as early as possible -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <!-- Fallback DNS lookup for browsers that ignore preconnect -->
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

  <!-- Warm up an asset the next page will need -->
  <link rel="prefetch" href="/next-page.js" as="script" />
</head>

Rule of thumb: preload for this page, prefetch for the next page, and preconnect / dns-prefetch to warm up connections to other origins.

Alternate versions with `rel="alternate"`

rel="alternate" points to an alternate representation of the current document. Combined with hreflang, it tells search engines which URL serves which language or region — essential for multilingual sites.

<head>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="de" href="https://example.com/de/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <!-- Default fallback when no language matches -->
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

The same rel value also declares non-HTML alternatives, such as an RSS feed:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/feed.xml" />

`crossorigin` and `integrity`

The crossorigin attribute controls whether the cross-origin request is made with CORS, and whether credentials (cookies) are sent:

crossorigin="anonymous" (or just crossorigin) — make a CORS request without credentials.
crossorigin="use-credentials" — make a CORS request that includes credentials.

You need crossorigin whenever the browser must read the response across origins, most commonly for fonts (which are always fetched in CORS mode) and for any resource you protect with integrity.

The integrity attribute enables Subresource Integrity (SRI). You provide a cryptographic hash of the file; the browser fetches the resource, hashes it, and refuses to apply it if the hashes do not match. This protects you if a CDN is compromised or a file is tampered with.

<link
  rel="stylesheet"
  href="https://cdn.example.com/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

The hash format is <algorithm>-<base64-hash> (allowed algorithms: sha256, sha384, sha512). Because the integrity check needs to read the response, an integrity link to another origin must also set crossorigin.

Attributes

Attribute	Value	Description
as	content_type	Specifies the type of content being loaded. Required when `rel="preload"`.
charset	char_encoding	Defines the coding of the linked document. Obsolete in HTML5.
crossorigin	anonymous use-credentials	Configures CORS settings for the linked resource.
href	URL	Defines the URL of the external file.
hreflang	language_code	Defines the text language of the linked document.
integrity	hash_value	Enables subresource integrity to verify fetched resources.
media	media_query	Defines the device, for which the styles will be applied.
rel	alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload	Defines the relationship between the current document and the linked file. Common values: `stylesheet` (links a CSS file), `icon` (links a favicon), `preload` (preloads a resource), `alternate` (links to an alternate version of the document).
rev	reversed relationship	Defines the relationship between the current and linked documents. Obsolete in HTML5.
sizes	Width x Height	Sets the size of associated icons. Used only with `rel="icon"`.
type	media_type	Defines the MIME-type (specification for network transfer of various types of files) of the linked document. Note: When linking a stylesheet, `type="text/css"` is optional and defaults to CSS.

The <link> tag also supports Global Attributes and the Event Attributes.

HTML <head> Tag — where every <link> element belongs.
HTML <script> Tag — the correct way to load JavaScript.
HTML <style> Tag — embed CSS directly instead of linking a file.
CSS Introduction — how the stylesheets you link actually work.

Practice

Which attribute is required when you use the HTML link tag with rel='preload'?

assrctargetdownload

Practice

Select every valid attribute of the HTML link tag (more than one is correct).

Syntax

Example of the HTML <link> tag:

Linking a favicon

Preloading resources with rel="preload"

Resource hints: preload vs prefetch vs preconnect vs dns-prefetch

Alternate versions with rel="alternate"

crossorigin and integrity

Attributes

Related resources

Practice

Example of the HTML `<link>` tag:

Preloading resources with `rel="preload"`

Alternate versions with `rel="alternate"`

`crossorigin` and `integrity`