← Back to All Tags

<link>

Defines the relationship between a document and an external resource

Definition and Usage

The <link> element establishes the relationship between the current document and an external resource.

The <link> tag is most often used to link to external style sheets, icons, and other resources.

The <link> element is an empty element, it contains attributes only.

Important: The <link> tag must be placed inside the <head> section of the document.
Note: The <link> tag is a void element (also called empty or self-closing element). It does not have a closing tag.

Browser Support

The <link> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
rel stylesheet, icon, preconnect, dns-prefetch, prefetch, preload, alternate, canonical, manifest, etc. Required. Specifies the relationship between the current document and the linked document
href URL Specifies the location of the linked document
type media_type Specifies the media type of the linked document (e.g., text/css, image/x-icon)
media media_query Specifies on what device the linked document will be displayed (e.g., screen, print)
sizes HeightxWidth
any		 Specifies the size of the linked resource. Only for rel="icon"
hreflang language_code Specifies the language of the text in the linked document
crossorigin anonymous
use-credentials		 Specifies how the element handles cross-origin requests
integrity hash Allows a browser to check the fetched resource to ensure it hasn't been manipulated
as audio, document, embed, fetch, font, image, object, script, style, track, video, worker Specifies the type of content being loaded. Only for rel="preload" or rel="prefetch"
referrerpolicy no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url Specifies which referrer information to send when fetching the resource

The <link> tag also supports the Global Attributes in HTML.

Examples

Link to External Stylesheet

The most common use - linking to a CSS file:

Example

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css">
</head>

Link to Favicon

Add a favicon (website icon) to your page:

Example

<head>
  <!-- Standard favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

  <!-- PNG favicon -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>

Preconnect to External Domains

Improve performance by establishing early connections:

Example

<head>
  <!-- Preconnect to Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <!-- DNS Prefetch -->
  <link rel="dns-prefetch" href="https://cdn.example.com">
</head>

Prefetch and Preload Resources

Optimize loading by hinting what resources will be needed:

Example

<head>
  <!-- Preload critical CSS -->
  <link rel="preload" href="critical.css" as="style">

  <!-- Preload web font -->
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  <!-- Prefetch for next page navigation -->
  <link rel="prefetch" href="next-page.html">
  <link rel="prefetch" href="image.jpg" as="image">
</head>

Alternate Stylesheets

Provide alternate style options:

Example

<head>
  <!-- Default stylesheet -->
  <link rel="stylesheet" href="default.css" title="Default">

  <!-- Alternate stylesheets -->
  <link rel="alternate stylesheet" href="dark-mode.css" title="Dark Mode">
  <link rel="alternate stylesheet" href="high-contrast.css" title="High Contrast">
</head>

Responsive CSS with Media Queries

Load different stylesheets based on device characteristics:

Example

<head>
  <!-- Base styles -->
  <link rel="stylesheet" href="base.css">

  <!-- Print styles -->
  <link rel="stylesheet" href="print.css" media="print">

  <!-- Screen styles for different sizes -->
  <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">
  <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">

  <!-- Dark mode preference -->
  <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
</head>

Canonical URL and Alternate Languages

Specify canonical URLs and language variants for SEO:

Example

<head>
  <!-- Canonical URL -->
  <link rel="canonical" href="https://example.com/page">

  <!-- Alternate language versions -->
  <link rel="alternate" hreflang="en" href="https://example.com/en/page">
  <link rel="alternate" hreflang="es" href="https://example.com/es/page">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
</head>

Web App Manifest and Security

Link to manifest and use subresource integrity:

Example

<head>
  <!-- Web App Manifest -->
  <link rel="manifest" href="/manifest.json">

  <!-- External CSS with integrity check -->
  <link rel="stylesheet"
        href="https://cdn.example.com/style.css"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
        crossorigin="anonymous">
</head>

Try it Yourself

Interactive Example

This page uses several <link> tags in the <head> section:

  • External Google Fonts stylesheet
  • Multiple local CSS files (main.css, lesson.css)
  • Favicon link
  • Canonical URL
  • Preconnect resource hints

Common rel Values

Value Description
stylesheet Imports an external CSS file
icon Defines a favicon for the document
preconnect Establishes early connection to external domain
dns-prefetch Performs DNS lookup for external domain in advance
prefetch Hints that a resource will be needed for future navigation
preload Tells browser to download a resource as it will be needed soon
alternate Provides alternate version of the document (language, format, etc.)
canonical Specifies the preferred URL for search engines
manifest Links to a web app manifest file
apple-touch-icon Specifies icon for iOS devices when added to home screen

Resource Hints for Performance

The <link> tag can provide hints to the browser for better performance:

  • dns-prefetch: Performs DNS lookup early. Use for domains you'll connect to later.
    <link rel="dns-prefetch" href="https://example.com">
  • preconnect: Establishes connection (DNS + TCP + TLS). Use for critical resources.
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • prefetch: Downloads resources for next page. Use for likely future navigation.
    <link rel="prefetch" href="next-page.html">
  • preload: Downloads critical resources early. Use for current page essentials.
    <link rel="preload" href="font.woff2" as="font">
Performance Tip: Use resource hints wisely. Too many preload/prefetch hints can actually slow down your page by competing for bandwidth.

Best Practices

  • Always place <link> tags inside the <head> section
  • Use the rel attribute - it's required for the tag to work properly
  • Add integrity attribute when linking to CDN resources for security
  • Use preconnect for critical third-party origins like Google Fonts
  • Specify crossorigin when needed for CORS requests
  • Use media attribute to conditionally load stylesheets
  • Optimize favicon with multiple sizes for different devices
  • Don't overuse resource hints - prioritize critical resources only
  • Use canonical links to avoid duplicate content issues in SEO
  • Include alternate language links for multilingual sites
  • Keep external stylesheet links at the top of <head> for faster rendering

Security Considerations

Important security aspects when using the <link> tag:

  • Subresource Integrity (SRI): Use integrity attribute for CDN resources
  • CORS: Set crossorigin appropriately for cross-origin resources
  • HTTPS: Always use HTTPS URLs for external resources
  • Referrer Policy: Control referrer information with referrerpolicy attribute

Secure Example

<link rel="stylesheet"
      href="https://cdn.example.com/style.css"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
      crossorigin="anonymous"
      referrerpolicy="no-referrer">

Default CSS Settings

Most browsers will display the <link> element with the following default values:

Default CSS

link {
  display: none;
}

Related Tags

  • <style>

    Defines internal CSS styles

  • <meta>

    Defines metadata about the document

  • <script>

    Defines client-side JavaScript

  • <head>

    Contains metadata and links

  • <base>

    Specifies base URL for all relative URLs

  • <a>

    Defines a hyperlink