<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.
It is placed only within the
<head>tag of the HTML document.
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 thehrefattribute;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:
- A CSS stylesheet (
rel="stylesheet"); - An icon for the browser (
rel="icon"); - A JavaScript file to preload (
rel="preload").
Attributes
| Attribute | Description | Example |
|---|---|---|
rel | Defines the relationship between the current document and the linked resource (list of values just below). | rel="stylesheet" |
href | Specifies the URL of the resource to be linked. | href="styles.css" |
type | Specifies the MIME type of the linked resource. | type="text/css" |
media | Indicates the type of media for which the resource is called. | media="screen" |
as | Indicates the type of content for preloads. | as="script" |
crossorigin | Specifies whether the resource should be fetched with credentials (CORS). | crossorigin="anonymous" |
sizes | Defines the dimensions of icons for relationships like rel="icon". | sizes="16x16" |
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 👀):
| Value | Description |
|---|---|
stylesheet | Link to an external CSS stylesheet. |
icon | Defines the site icon (favicon). |
alternate | Link to an alternative version of the content (e.g., RSS feed). |
preload | Indicates a resource to preload for optimization. |
Browser compatibility
The <link> instruction is compatible with all browsers.
| Element | Google Chrome | Safari | Mozilla Firefox | Edge |
| <link> | Yes | Yes | Yes | Yes |