HTML link Element: Stylesheets, Preloading, and Resource Hints
Master the HTML link element for loading stylesheets, preloading resources, DNS prefetching, and defining canonical URLs, favicons, and web app manifests.
Document Metadata
Detailed Explanation
The HTML link Element
The <link> element establishes relationships between the current document and external resources. It is one of the most versatile elements in the <head> section.
Loading Stylesheets
<!-- Main stylesheet -->
<link rel="stylesheet" href="/css/main.css">
<!-- Print-specific stylesheet -->
<link rel="stylesheet" href="/css/print.css" media="print">
<!-- Conditional loading (media query) -->
<link rel="stylesheet" href="/css/mobile.css" media="(max-width: 768px)">
Resource Hints
<!-- Preload: high-priority resource needed soon -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prefetch: resource likely needed for next navigation -->
<link rel="prefetch" href="/next-page.html">
<!-- DNS Prefetch: resolve domain name early -->
<link rel="dns-prefetch" href="https://api.example.com">
<!-- Preconnect: establish connection early -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<!-- Modulepreload: preload ES modules -->
<link rel="modulepreload" href="/js/app.mjs">
Favicon and Icons
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
SEO and Discoverability
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page">
<!-- Alternate languages -->
<link rel="alternate" hreflang="ja" href="https://example.com/ja/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<!-- RSS/Atom feed -->
<link rel="alternate" type="application/rss+xml" title="Blog Feed" href="/feed.xml">
<!-- Web App Manifest -->
<link rel="manifest" href="/manifest.json">
Security
<!-- Subresource Integrity -->
<link rel="stylesheet" href="https://cdn.example.com/lib.css"
integrity="sha384-abc123..." crossorigin="anonymous">
Use Case
The link element is critical for web performance (preload, preconnect, prefetch), SEO (canonical, alternate), and progressive web apps (manifest). Resource hints can reduce page load times by seconds on slow connections. Canonical URLs prevent duplicate content issues in search engine indexing.