<link>

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

<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">

  <!-- 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/">
</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.

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.