Overview

The <link> tag is primarily used to connect the current webpage with related external resources and is usually placed inside the <head> element. Its most common use is to load CSS stylesheets.

1
<link rel="stylesheet" type="text/css" href="theme.css">

The code above loads the stylesheet theme.css for the webpage.

In addition to the default stylesheet, a webpage can also load alternate stylesheets that are not applied by default but can be manually switched by the user.

1
2
3
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

Here, default.css is the default stylesheet and is applied automatically. fancy.css and basic.css are alternate stylesheets (rel="alternate stylesheet") and are not applied by default. The title attribute is essential here as it lists these stylesheets in the browser menu, allowing users to switch between them.

The <link> tag can also be used to load a website’s favicon.

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

For mobile access, different resolutions of the icon file are often required.

1
2
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

The above code specifies icons of 114 pixels and 72 pixels for iPhone devices.

Additionally, <link> can provide related document links, such as the RSS Feed address.

1
<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

href Attribute

The href attribute specifies the resource linked by the <link> tag.

rel Attribute

The rel attribute defines the relationship between the current document and an external resource. It is a required attribute for the <link> tag and serves to describe the resource linked by the href attribute. Here are some common values:

  • alternate: A different version of the document, such as a print version.
  • author: A link to the document’s author.
  • dns-prefetch: Requests the browser to perform DNS lookup for a specified URL in advance.
  • help: A link to a help document.
  • icon: Specifies the document’s icon file.
  • license: A link to the license information.
  • next: The link to the next document in a series.
  • pingback: The URL to receive pingback requests.
  • preconnect: Requests the browser to establish an HTTP connection to the given server early.
  • prefetch: Suggests the browser download and cache the specified resource for future use. This has lower priority and may not be downloaded.
  • preload: Directs the browser to download and cache a resource for immediate future use, with higher priority.
  • prerender: Instructs the browser to pre-render the specified link, making it load instantly when accessed.
  • prev: The link to the previous document in a series.
  • search: A link to search functionality for the current page.
  • stylesheet: Specifies a stylesheet to load.

Here are some examples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- Author information -->
<link rel="author" href="humans.txt">

<!-- License information -->
<link rel="license" href="copyright.html">

<!-- Alternative language version -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Contact information -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">

<!-- Archives -->
<link rel="archives" href="http://example.com/archives/">

<!-- Index -->
<link rel="index" href="http://example.com/article/">

<!-- Navigation -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

hreflang Attribute

The hreflang attribute specifies the language of the resource linked by href, often used for alternate language versions of the current page.

1
<link href="https://example.com/de" rel="alternate" hreflang="de" />

In this example, hreflang indicates that the linked page is in German. When multiple language versions are available, hreflang can be set to x-default to specify the default version.

1
2
<link href="https://example.com" rel="alternate" hreflang="x-default" />
<link href="https://example.com/de" rel="alternate" hreflang="de" />

Here, x-default signifies the default page.

Preloading Resources

In some cases, you need the browser to preload resources—essentially, caching them in advance so that they are immediately available when needed, rather than having to be downloaded from the web. The preload directive accomplishes this.

There are five main types of preloading:

This instructs the browser to download and cache resources (like scripts or stylesheets) as soon as possible. It’s high-priority, so the browser will definitely follow this directive. The resource is downloaded and cached, but not executed or applied until needed.

1
<link rel="preload" href="image.png" as="image">

rel="preload" not only has high priority but also allows specifying the type of resource being preloaded and using onload event callbacks. The as attribute indicates the type of the resource for proper handling.

1
2
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

Here, the browser is instructed to download and cache style.css and main.js in advance.

**as** Attribute

The as attribute specifies the type of resource and can take values like:

  • “script”
  • “style”
  • “image”
  • “media”
  • “document”

If as is not specified or has an unrecognized value, the browser will download the resource with lower priority.

**type** Attribute

Sometimes, specifying the MIME type with the type attribute is necessary:

1
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

This preloads a video file and indicates it is MP4 encoded.

Fonts Example:

1
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

This preloads a font file with proper MIME type.

To make preloaded resources execute immediately, use:

1
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">

This code ensures that the stylesheet is applied as soon as it’s downloaded.

Used for resources likely needed for future pages. It has lower priority and might not always be executed.

1
<link rel="prefetch" href="https://www.example.com/">

Establishes a TCP connection with a domain in advance.

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

Performs DNS resolution for a domain early.

1
<link rel="dns-prefetch" href="//example.com/">

Loads and renders a page in advance. It’s useful if you anticipate the user will visit that page soon.

1
<link rel="prerender" href="http://example.com/">

media Attribute

The media attribute specifies the conditions under which an external resource is applied.

1
2
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

In this example, print.css is loaded when printing, and mobile.css is loaded when the device width is 600 pixels or less.

Here’s another example using the media attribute for conditional loading:

1
2
<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

In this case, map.png is preloaded if the screen width is 600 pixels or less, while map.js is preloaded if the screen width is 601 pixels or more.

Other Attributes

Here are some additional attributes for the <link> tag:

  • crossorigin: Specifies cross-origin settings for loading external resources.
  • href: URL of the external resource.
  • referrerpolicy: Defines how the Referer header is handled when loading the resource.
  • as: For rel="preload" or rel="prefetch", specifies the type of external resource.
  • type: MIME type of the external resource, used with rel="preload" or rel="prefetch".
  • title: Identifies the stylesheet name when loading stylesheets.
  • sizes: Declares the sizes of icon files, such as for Apple devices.

Link to original article:

https://wangdoc.com/html/link