The <link> element
The <link> tag connects a page to an external resource. It sits in the <head>, and its rel attribute says what the relationship is: stylesheet loads a CSS file, icon sets the favicon, canonical tells search engines the preferred URL, and preload fetches an important file early. Unlike <a>, it creates no clickable link.
Last updated: October 3, 2026
Quick facts
| Category | Metadata content (and phrasing content for body-allowed types such as stylesheet) |
| Content model | Empty — it’s a void element |
| Tag omission | Void element — no end tag, ever |
| Permitted parents | A <head> element (stylesheet and preload links may also appear in the body) |
| DOM interface | HTMLLinkElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| rel | The relationship: stylesheet, icon, canonical, preload, preconnect, alternate, manifest… |
| href | The URL of the linked resource |
| as | With preload: what kind of file it is, e.g. font, image, script |
| type | The file’s format, e.g. image/svg+xml for an SVG icon |
| media | Only applies the resource for a media query, e.g. a print stylesheet |
| sizes | Icon sizes, e.g. 180x180 for an Apple touch icon |
| hreflang | With alternate: the language of a translated version of the page |
| crossorigin / integrity | Security options for files loaded from another domain |
Common examples
A complete favicon set
An SVG icon for modern browsers, a PNG fallback, and an Apple touch icon for iPhone home screens.
A canonical URL
Tell search engines which address is the main one when the same page is reachable at several URLs (with tracking parameters, for example).
Preload a web font
Fonts are discovered late, so preloading the main one avoids a flash of fallback text. Font preloads need crossorigin, even on your own domain.
<link rel=”stylesheet”> vs CSS @import
Both load a CSS file, but they behave differently. A <link rel="stylesheet"> in the HTML is found immediately, so the browser can download several stylesheets in parallel. An @import inside a CSS file is only discovered after that first file has downloaded, so the files load one after another and the page appears later.
For page speed, prefer <link> tags. @import is still handy inside build tools that combine your CSS into a single file before it ever reaches the browser.
| <link rel=”stylesheet”> | @import | |
|---|---|---|
| Where it goes | HTML <head> | Inside a CSS file |
| Downloads | In parallel | One after another |
| Page speed | Better | Slower |
Common mistakes to avoid
- Wrong paths or capital letters.
Style.cssandstyle.cssare different files on most servers; a broken path fails silently and the page loses its styles. - Preloading too much. Preload only the one or two files the page needs straight away; preloading everything slows down the important ones.
- A canonical that points to the wrong page. Pointing every page at the homepage, or at a page that redirects, can drop your pages from Google. Use the page’s own full URL.
- Font preloads without
crossorigin. The browser then downloads the font twice.
Accessibility & SEO tips
- Use absolute URLs (starting with
https://) inrel="canonical"andrel="alternate"links. - For translated pages, add
<link rel="alternate" hreflang="es" href="…">so Google shows each visitor the right language. - Add
<link rel="preconnect">for important third-party hosts such as a font service, to save time on the first request.
Browser support
Supported in every browser. Newer rel values such as preload and preconnect work in all current browsers; older browsers simply ignore values they don’t know.
Tutorials: How to add a link, How to change the font, How to link CSS to HTML