<link>

Since:		HTML 4（1997）

The <link> tag links external resources (such as CSS files and favicons) to an HTML document. It is placed inside <head> and is a void element — no closing tag is needed.

Syntax

<!-- Load a CSS file -->
<link rel="stylesheet" href="style.css?lang=en">

<!-- Specify a favicon -->
<link rel="icon" href="favicon.ico?lang=en" type="image/x-icon">

<!-- Load a print stylesheet -->
<link rel="stylesheet" href="print.css?lang=en" media="print">

<!-- Preload a resource -->
<link rel="preload" href="font.woff2?lang=en" as="font" type="font/woff2" crossorigin>

Attributes

Attribute	Description
rel	Specifies the relationship between the document and the linked resource. This is the most important attribute and is required.
href	Specifies the URL of the linked resource.
type	Specifies the MIME type of the resource. This can usually be omitted.
media	Specifies the media the resource applies to, such as `screen` or `print`.
crossorigin	Specifies how to handle cross-origin resource requests. Used when preloading fonts, for example.
as	Specifies the type of resource when using preload (`rel="preload"`).

Common rel values

rel value	Description
stylesheet	Loads an external CSS file. This is the most commonly used value.
icon	Specifies the favicon shown in the browser tab.
canonical	Tells search engines the canonical URL when duplicate pages exist.
preload	Preloads resources needed to render the page.
alternate	Specifies an alternate version of the page, such as a different language or print version.

Sample code

sample_link.html

<head>
  <meta charset="UTF-8">
  <title>Sample Page</title>

  <!-- Load a CSS file (most common use) -->
  <link rel="stylesheet" href="css/style.css?lang=en">

  <!-- CSS applied only when printing -->
  <link rel="stylesheet" href="css/print.css?lang=en" media="print">

  <!-- Specify a favicon -->
  <link rel="icon" href="favicon.ico?lang=en">

  <!-- Icon for smartphones -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png?lang=en">

  <!-- Specify the canonical URL -->
  <link rel="canonical" href="https://example.com/page/">

  <!-- Multilingual site: link Japanese and English versions -->
  <link rel="alternate" hreflang="ja" href="https://example.com/ja/page/">
  <link rel="alternate" hreflang="en" href="https://example.com/en/page/">
  <link rel="alternate" hreflang="x-default" href="https://example.com/page/">

  <!-- Preload a font to prevent layout shift -->
  <link rel="preload" href="fonts/NotoSansJP.woff2?lang=en"
        as="font" type="font/woff2" crossorigin>
</head>

Result

The CSS file is loaded and styles are applied to the page. The favicon appears in the browser tab and as the icon when the page is added to a smartphone's home screen. When printing, print.css takes effect and overrides the screen styles. Preloading the font reduces the time until text is rendered in the correct typeface.

View sample page

Notes

The most common use of the <link> tag is loading CSS files with rel="stylesheet". To load multiple CSS files, write multiple <link> tags.

Because CSS files block page rendering, consolidating them into as few files as possible helps improve page load speed. JavaScript files, on the other hand, are typically placed at the end of <body> or loaded with the defer attribute on the <script> tag to defer loading.

Using rel="preload" lets you preload fonts, images, and other resources in parallel with HTML parsing, which can improve page load performance. When preloading fonts, be sure to include the crossorigin attribute. Without it, the font will be downloaded twice.

Choosing Between preload, prefetch, preconnect, and dns-prefetch

There are four resource hinting methods available. Choose the right one based on your use case.

rel value	Priority	Timing	Best for
preload	High	Used on the current page for certain	Web fonts, hero images, critical CSS
prefetch	Low	May be used on the next page	Next page JS/images (fetched during idle time)
preconnect	Medium	Pre-establish a connection to an external domain	Google Fonts, CDN, API servers
dns-prefetch	Low	DNS resolution only	Fallback for browsers that don't support preconnect

<!-- Recommended pattern for accelerating Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Fallback for browsers without preconnect support -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap">

<!-- Preload a hero image with high priority -->
<link rel="preload" href="/img/hero.webp?lang=en" as="image" type="image/webp">

<!-- Prefetch the next page (useful for list → detail page flows) -->
<link rel="prefetch" href="/articles/page2/?lang=en">

Dynamically Manipulating link Tags with JavaScript

// Load a CSS file dynamically (e.g., for theme switching)
function loadCSS(href) {
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  document.head.appendChild(link);
}
loadCSS("/css/theme-dark.css");

// Remove a CSS file (revert theme)
var themeLink = document.querySelector('link[href="/css/theme-dark.css?lang=en"]');
if (themeLink) {
  themeLink.parentNode.removeChild(themeLink);
}

// Change the favicon dynamically (e.g., for notification badges)
var favicon = document.querySelector('link[rel="icon"]');
if (favicon) {
  favicon.href = "/img/favicon-notify.png";
}