<link> External resource link
Ties the page to external files such as stylesheets and icons.
<link> is a void element, normally in the head, that points the page at another file. Its rel attribute names the relationship. stylesheet loads CSS and icon sets the favicon; preload fetches a file early, and canonical names the preferred URL.
It has nothing to do with <a>, and nobody can click a link tag. Watch out for src typed where href should be.
The link element section of the WHATWG standard (opens in a new tab) describes every rel keyword, stylesheet, icon and preload included. Try it out in the External Stylesheets lesson.
Void element: it has no content and no closing tag.
Syntax
<link rel="stylesheet" href="style.css">When to use it
The link element declares a relationship with another resource that the browser or a crawler should act on. That covers a stylesheet, a favicon, a canonical URL for a page reachable at several addresses, translations marked with rel="alternate" and hreflang, and a preload hint for a font the page needs right away.
For CSS you usually choose between link and an inline <style> block. Once two pages share styles, link wins: the file downloads once and comes from the cache after that. Anything people should click is an <a>, since a link element never shows up on the page.
Preload fetches a file and does nothing else with it. If the page never uses that file, you have wasted bandwidth and earned a console warning. Preloaded fonts also need the crossorigin attribute, even from your own server, or they download twice. A canonical should point at the real indexable page, as Google explains in its guide to consolidating duplicate URLs (opens in a new tab).
Attributes
| Attribute | What it does |
|---|---|
rel | Relationship: stylesheet, icon, preload, canonical, manifest... |
href | URL of the linked resource. |
type | MIME type, such as image/svg+xml for an icon. |
media | Media query; the resource applies only when it matches. |
sizes | Icon sizes, such as 32x32 or any. |
as | Type of content to preload: style, script, font, image... |
crossorigin | CORS mode for the request (anonymous or use-credentials). |
integrity | Hash that the downloaded file must match. |
hreflang | Language of the linked resource. |
Live example
Edit the code and watch the preview.
<head>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
</head>
<h1>Styled by style.css</h1>
<p>This page loads an external stylesheet and a favicon.</p>More examples
Canonical URL and language versions
This English page names its preferred address with rel="canonical" and points to its German translation with rel="alternate" and hreflang. Search engines use these hints to show the right version to each visitor and to avoid duplicates.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Opening Hours - Sunny Bakery</title>
<link rel="canonical" href="https://sunny.example/en/hours/">
<link rel="alternate" hreflang="en" href="https://sunny.example/en/hours/">
<link rel="alternate" hreflang="de" href="https://sunny.example/de/hours/">
</head>
<body>
<h1>Opening hours</h1>
<p>Monday to Saturday, 7am to 6pm.</p>
</body>
</html>A stylesheet only for wide screens
The media attribute applies the sample stylesheet only when the preview is at least 700 pixels wide; on a narrower screen the page stays unstyled. The browser still downloads the file, but with low priority and without delaying the first render.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wide screen styles</title>
<link rel="stylesheet" href="style.css" media="(min-width: 700px)">
</head>
<body>
<h1>Resize the preview</h1>
<p>The styles from style.css appear only on wide screens.</p>
</body>
</html>Tip: Set rel, and use href (never src).
Browser support
Linking stylesheets with rel="stylesheet" has worked in every browser since the 1990s, and rel="icon" is universal too. Newer keywords arrived over time: preload has been in all major browsers since early 2021, as the preload support table (opens in a new tab) shows. Browsers ignore rel values they do not recognise, so extra hints are safe.
Accessibility
A linked stylesheet still has to keep enough color contrast, as set out in Understanding Contrast (Minimum) (opens in a new tab). Check too that the content makes sense when the CSS fails to load.
Common mistakes
Wrong
<link href="styles.css">Right
<link rel="stylesheet" href="styles.css">Without rel the browser has no idea the file is a stylesheet, so it never applies it.
Wrong
<link rel="stylesheet" href="styles.css"></link>Right
<link rel="stylesheet" href="styles.css">link is void. There is no end tag to write.
Frequently asked questions
How do I link a CSS file to HTML?
Put a <link> in the <head> with rel="stylesheet" and the path to the file: <link rel="stylesheet" href="styles.css">. The path is relative to the HTML file unless it begins with / or is a full URL. HTML5 does not need type="text/css". Once it is linked, you can tidy or minify the stylesheet in an online CSS editor and formatter (opens in a new tab).
What is the difference between the link tag and the a tag?
<link> declares a relationship between the document and another resource: a stylesheet, an icon, a canonical URL. It is void, usually sits in the head and is never shown to the user. <a> makes a visible hyperlink in the body that people click to go somewhere else. Clickable links get the full treatment in the a element reference.
Practise it
- Favicon and Social Previews (Module 7: Head and Metadata)
- Linking CSS and JavaScript (Module 7: Head and Metadata)
- Project: Complete Head (Module 7: Head and Metadata)
- External Stylesheets (Module 9: A Touch of CSS)