Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The <link> element links external resources like stylesheets, fonts, and icons. It's a void element (no closing tag).
<link rel="stylesheet" href="styles.css">Most used link types
<div class="link-types">
<div class="link-card">
<span class="icon">🎨</span>
<code>rel="stylesheet"</code>
<span class="desc">CSS files</span>
</div>
<div class="link-card">
<span class="icon">⭐</span>
<code>rel="icon"</code>
<span class="desc">Favicon</span>
</div>
<div class="link-card">
<span class="icon">⚡</span>
<code>rel="preload"</code>
<span class="desc">Priority loading</span>
</div>
<div class="link-card">
<span class="icon">🔗</span>
<code>rel="canonical"</code>
<span class="desc">Primary URL</span>
</div>
</div>Loading preview...
Various link uses in one document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Element Demo</title>
</head>
<body>
<h1>Link Element</h1>
<p>Check the head section for various link uses!</p>
</body>
</html>Loading preview...
rel="preload"PerformanceLoad critical resources early — fonts, hero images
rel="prefetch"PerformanceLoad resources for next page — next page assets
rel="preconnect"PerformanceEarly connection to domains — fonts.googleapis.com
rel="dns-prefetch"PerformanceResolve DNS early — third-party domains
preconnect for Google Fonts to speed up font loading significantly.