HTML <link> Tag

The <link> tag in HTML specifies the relationship between the current document and an external resource. It's most commonly used to link external stylesheets to HTML documents, enabling you to style your web pages using CSS. However, it also supports other resource types like favicons, preloading resources, and more. The <link> tag is an empty element, meaning it doesn't have a closing tag and it resides within the <head> section of the HTML document.

HTML Link Tag: Connecting External Resources

Syntax

<link rel="relationship" href="URL" type="MIME type" sizes="icon sizes" media="media query" crossorigin="crossorigin setting" integrity="hash value" referrerpolicy="referrer policy" as="resource type"  hreflang="language code">

Attributes

Attribute Value Description
href URL Specifies the URL of the external resource.
rel alternate, author, bookmark, canonical, dns-prefetch, external, help, icon, license, manifest, modulepreload, next, nofollow, noopener, noreferrer, opener, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet, tag Specifies the relationship between the current document and the linked resource. Common values include stylesheet, icon, preload, etc.
type MIME type Specifies the MIME type of the linked resource. For CSS it is text/css, for Javascript text/javascript. For images, the correct type will depend on the image format such as image/png, image/jpeg or image/webp.
media media query Specifies the media for which the linked resource is optimized. Examples include screen, print, (max-width: 600px).
sizes any or widthxheight Specifies the sizes of the linked icon, especially useful when linking to favicon files. Example: 16x16, 32x32, or any
crossorigin anonymous or use-credentials Specifies how CORS requests should be handled when loading the external resource.
integrity hash value Allows browsers to verify that fetched resources haven't been manipulated.
referrerpolicy no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url Specifies which referrer information to send when fetching the resource.
as audio, document, embed, fetch, font, image, object, script, style, track, video, worker Used with rel="preload" or rel="modulepreload" to specify the type of resource being loaded.
hreflang language code Specifies the language of the linked resource. Example: en, es, fr.

Example

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

More Examples

Linking a Favicon

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png" sizes="32x32">

This snippet links an icon file in .ico format as well as a png file in .png format, specifying different sizes for different devices.

Linking a Print Stylesheet

<link rel="stylesheet" href="print.css" media="print">

This links a stylesheet that is only applied when the document is printed.

Preloading a Font

<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

This tells the browser to start downloading the custom font as soon as possible, speeding up page load times when that font is needed.

Alternate Stylesheet

<link rel="alternate stylesheet" href="dark-theme.css" title="Dark Theme">
<link rel="stylesheet" href="light-theme.css" title="Light Theme">

This code provides alternative stylesheets. Users can select a theme, for example through a dropdown. The browser will use the stylesheet linked with the correct title.

Using Integrity and Crossorigin

<link rel="stylesheet" href="https://cdn.example.com/style.css" integrity="sha384-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous">

This includes an external stylesheet from a CDN and uses integrity hash to ensure the file is not tampered with and is fetched from the specified origin only.

Preconnecting to a Server

<link rel="preconnect" href="https://api.example.com">

This establishes an early connection with the specified server, which reduces latency for fetching data when you need it.

Prefetching a Resource

<link rel="prefetch" href="/next-page.html">

This tells the browser to fetch the next-page.html file in the background so it's readily available if the user navigates there.

Browser Support

The <link> tag is supported by all modern browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Notes and Tips

  • Always use the rel attribute correctly to specify the relationship between the document and the external resource.
  • Use the type attribute when linking resources other than stylesheets, such as icons, to ensure the browser interprets the resource correctly.
  • Preloading and prefetching resources can significantly improve page load times, but use them judiciously to avoid overloading the network.
  • Utilize integrity attribute when including resources from CDNs to improve website security.
  • When linking stylesheets, try to use a single stylesheet for better maintainability.
  • Use media queries to optimize stylesheets for different devices and display types.
  • Remember that the <link> element is a void element and has no closing tag.
  • Make sure that your URLs are correct and accessible to avoid broken links.
  • Always specify the sizes attribute when linking icons for different device resolutions.
  • Always place the <link> tag inside the <head> section of the HTML document.
  • Using rel="canonical" is important for SEO to prevent duplicate content issues.

Continue Reading

HTML Datalist options Collection: Accessing List Options

January 10, 2025

HTML Document Anchors Collection: Accessing Anchor Elements

January 10, 2025

HTML Document applets Collection: Accessing Applet Elements

January 10, 2025

HTML Canvas transform() Method: Applying Transformations

January 10, 2025

HTML Canvas translate() Method: Translating the Canvas Origin

January 9, 2025

HTML Canvas textBaseline Property: Setting Text Baseline

January 9, 2025