Path // www.yourhtmlsource.com → Reference → <link>

<link>

by Ross Shannon

The <link> element defines a relationship between the current document and an external resource. It's most commonly used to link to stylesheets, but also serves many other purposes including specifying favicons, preloading resources, and defining canonical URLs. This is a void element (self-closing) that is typically placed in the <head> section. However, when used with the itemprop attribute for Microdata, it can also appear in the <body>.

Clock This page was last updated on 2025-11-27


Syntax

<link rel="stylesheet" href="styles.css">

Attributes

  • href - URL of the linked resource (required for most link types)
  • rel - Relationship type between the document and the linked resource. Common values:
    • stylesheet - External CSS file
    • icon - Favicon for the page
    • preload - Resource to preload for performance
    • canonical - Preferred URL for the current page
    • alternate - Alternative version of the document
  • type - MIME type of the linked resource (e.g., "text/css")
  • media - Media query for when the resource should apply
  • sizes - Icon sizes (for rel="icon")
  • as - Type of content being preloaded (for rel="preload")
  • crossorigin - How to handle cross-origin requests
  • integrity - Subresource integrity hash for security

Examples

Linking to a stylesheet:

<link rel="stylesheet" href="styles.css">

Adding a favicon:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Preloading critical resources:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="critical.js" as="script">

Responsive stylesheets:

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">
<link rel="stylesheet" href="print.css" media="print">

Canonical URL (for SEO):

<link rel="canonical" href="https://www.example.com/page">

Prefetching and preconnecting:

<link rel="dns-prefetch" href="//api.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="next-page.html">

When to Use

Use the <link> element for:

  • External stylesheets - The most common use case
  • Favicons and app icons - Browser tab icons and mobile home screen icons
  • Performance optimization - Preloading, prefetching, and preconnecting to resources
  • SEO - Canonical URLs to avoid duplicate content issues
  • Alternate versions - Different language versions or formats (RSS, PDF)
  • Web fonts - Connecting to font services like Google Fonts

Best practices:

  • Place stylesheet links in the <head> so styles load before content renders
  • Use rel="preload" for critical resources that are discovered late in the page load
  • Include integrity hashes for third-party resources to ensure security
  • Use media queries to load only necessary stylesheets for different devices
  • Always specify the rel attribute; it's required for proper functionality
  • For icons, provide multiple sizes for different devices and contexts
  • Use rel="canonical" on every page to indicate the preferred URL

Related Elements

  • <head> - The container where <link> must be placed
  • <style> - For internal/embedded CSS instead of external
  • <script> - For linking to JavaScript files
  • <meta> - For other document metadata
  • <base> - Can affect relative URLs in link href