SyntaxStudy
Sign Up
HTML Link Tags in HTML Head
HTML Intermediate 7 min read

Link Tags in HTML Head

Link Tags in HTML Head

The <link> element defines relationships between the current document and external resources. The rel attribute specifies the relationship type and the href attribute points to the resource. Unlike <a>, <link> is always used in <head> and creates no clickable link.

Common Link Relationships

rel="stylesheet" loads an external CSS file. rel="icon" sets the favicon. rel="preconnect" and rel="preload" are performance hints: preconnect establishes an early connection to a domain (useful for third-party fonts), while preload fetches a resource early in the page lifecycle (useful for critical fonts, images, or scripts). rel="alternate" points to translations or RSS feeds.

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Link Tags</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/print.css" media="print">

  <!-- Favicon (multiple sizes) -->
  <link rel="icon" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
  <link rel="apple-touch-icon" href="/apple-icon-180.png">

  <!-- Performance -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>

  <!-- RSS feed -->
  <link rel="alternate" type="application/rss+xml"
        title="Blog Feed" href="/feed.xml">

  <!-- Canonical -->
  <link rel="canonical" href="https://example.com/page/">
</head>
<body>...</body>
</html>
Pro Tip

Add rel="preconnect" for every third-party origin you load resources from (Google Fonts, CDNs, analytics) — it eliminates the DNS lookup and TCP handshake latency from your critical rendering path, noticeably speeding up initial page load.