How to Use the link Element

The HTML link element tells the browser how the current page is related to another file. It is often used to load a CSS file or tell the browser which icon belongs to the site.

The answer first

The most common example: load CSS

<head>
  <link rel="stylesheet" href="style.css">
</head>

href gives the location of the file. rel="stylesheet" tells the browser that the file contains CSS to use for the page's appearance. If the folder or filename is wrong, the CSS will not load.

rel describes the relationship

The rel value describes how the page and the named file are related. Different values tell the browser to do different things.

Markup	What it does
rel="stylesheet"	Loads CSS and uses it to style the page
rel="icon"	Identifies an icon for browser tabs and other places
rel="preload"	Asks the browser to fetch a file early when the page will soon need it
rel="preconnect"	Gets a connection to another site ready before the page needs a file from it
rel="canonical"	Identifies the preferred URL when the same page has more than one URL

Fetch a file early

Use preload when you know the page will need a file soon. For example, a page can ask the browser to fetch a font early.

<link rel="preload" href="/fonts/site.woff2" as="font" type="font/woff2" crossorigin>

The as value says what kind of file is being fetched. Preloading a file does not, by itself, apply a font or CSS to the page. The page still needs to use that file.

Fetching files that the page does not need can compete with images or other files the page needs right away. Preload only files that are needed soon.

preconnect does not download a file

preconnect prepares a connection to another site before a file is requested from it. It does not download the file. Use it when you know which site you will need soon.

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Preparing many connections that the page will not use adds work for the browser and the network. Include only useful destinations.

It is different from a link you can click

The names link and a are similar, but they have different jobs. Use a for text people can click to go to another page. A link element tells the browser about a relationship between this page and another file or page.

<!-- Use a CSS file on this page -->
<link rel="stylesheet" href="style.css">

<!-- Let people go to another page -->
<a href="about.html">About this site</a>

Common mistakes

• Adding a closing tag to <link>. The link element has no contents and no closing tag
• Leaving out rel, so the browser does not know what kind of relationship to use
• Using the wrong folder or filename in href
• Expecting preload to apply a file to the page by itself
• Trying to make a clickable page link with link. Use a for navigation

A few more details

media can limit when a CSS file is used. crossorigin, integrity, and referrerpolicy affect how the browser requests or checks files from another site. Their exact meaning depends on the rel value and file type, so check the rules before adding them.

Check it in Atlas

For the conditions on each rel value, the difference between preload and modulepreload, stylesheet processing, and browser observations, see the link element in Yugien Atlas. For clickable page links, see the a element.