<link>

The <link> tag is used to establish a relationship between an HTML document and an external resource.

It is primarily used to link stylesheets (CSS) to the document, but it can also be used to indicate relationships such as site icons (favicon) or to preload certain resources.

Structure and syntax of the <link> tag

Basic structure and syntax

The <link> tag is a self-closing tag (it closes itself), so it does not have a closing tag.

Here is its general structure:

<link rel="[relation]" href="[URL of the resource]">

We need to specify two things:

• rel - What the relationship will be between the current document and the resource located in the href attribute;
• href - Where the resource to be linked is located.

Usage examples

Linking a stylesheet

<link rel="stylesheet" href="styles.css">

In this example, we use the relationship type stylesheet to establish a link between the current HTML file and the styles.css file.

Linking with a favicon

<link rel="icon" href="favicon.ico" type="image/x-icon">

Here, we use the relationship type icon to specify the icon to be used. Note that for this type of relationship, it is important to specify the image type obligatorily.

Complete example

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles/main.css">
  <link rel="icon" href="images/favicon.png" type="image/png">
  <link rel="preload" href="scripts/main.js" as="script">
</head>
<body>
  <h1>Welcome to my site</h1>
</body>
</html>

In this example, we combine several types of relationships to specify:

1. A CSS stylesheet (rel="stylesheet");
2. An icon for the browser (rel="icon");
3. A JavaScript file to preload (rel="preload").

Attributes

Generally, the attributes rel, href, type, and less frequently media, are used with the <link> tag.

Here are the different values for your relationships (with the rel attribute, if you follow along 👀):

Browser compatibility

The <link> instruction is compatible with all browsers.