This tutorial will guide you using the HTML <link> tag to link to external resources such as CSS files, favicons, and preloading assets. The examples in this guide will help you understand the concept of using the HTML link tag more effectively.



What is the HTML <link> Tag?

The HTML <link> tag establishes a link between the current document and an external resource. This tag is usually used to link to an external stylesheet, add a favicon to a website, or preload resources to improve page load performance. Here's its basic structure:

<link rel="relationship_value" 
      type="MIME_type" 
      href="resource_location" 
      media="media_type" 
      sizes="widthxheight" 
      hreflang="language_code" 
      as="resource_type">

Attributes of the <link> Tag

The <link> tag has the following attributes:

Attribute Description
rel The rel attribute specifies the relationship between the current document and the linked resource. It can have different values depending on the type of resource you are linking to.
type The type attribute specifies the MIME type of the linked document. For CSS, it's text/css.
href The href attribute specifies the location of the linked resource. It can be an absolute or a relative URL.
media The media attribute specifies the media type to which the linked resource should be applied. For example, media="screen" for a style sheet that should only be used for screen-based devices.
sizes The sizes attribute specifies the width and height of the linked resource, which can help optimize the performance of images.
hreflang The hreflang attribute specifies the language of the linked resource, which can be helpful for internationalization.
as The as attribute specifies the type of content being fetched. For example, font for a font file and script for a JavaScript file.

Types of link relationships

The rel attribute of the link tag specifies the relationship between the current document and the linked resource. It can have different values depending on the type of resource you are linking to. Here are a few examples:

rel Value Description
stylesheet Links to an external CSS file.
icon Links to a favicon.
alternate Links to an alternate document version, such as a mobile or translated version.
canonical Links to the preferred version of the document.
next Links to the next page in a paginated sequence.
prev Links to the previous page in a paginated sequence.
preconnect Hints to the browser that it should preconnect to the linked resource.
prefetch Hints to the browser that it should prefetch the linked resource.

Here are common uses of the HTML link tag:

Linking an External Style Sheet

To link to an external style sheet, you need to use the rel="stylesheet" attribute and the href attribute with the URL of the style sheet. For example, if you have a style sheet called style.css saved in the same folder as your HTML document, you can link it by using the following code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- HTML content goes here -->
</body>
</html>

Linking a Favicon

The link tag links a favicon (a small icon in the address bar, browser tab, bookmarks, and history) to the HTML document. To add a favicon to your website, you need to use the rel="icon" attribute and the href attribute with the URL of the icon image. For example, if you have an icon image named favicon.png in the same folder as your HTML document,  you can link it by using the following code:

<link rel="icon" type="image/png" href="favicon.png">

Preloading and Prefetching Resources

You can use the link tag to preload and prefetch specific resources, such as images or fonts. It can improve page load performance by reducing the number of HTTP requests that need to be made. For example, to preload an image named image.jpg, you would use the following code:

<link rel="preload" href="image.jpg" as="image" type="image/jpeg">

To prefetch a resource, use the rel="prefetch" attribute. For example, to prefetch a font named font.woff2, you would use the following code:

<link rel="prefetch" href="font.woff2" as="font" type="font/woff2">

Conclusion

The HTML link tag lets you link to external resources and define their relationship with your document, such as style sheets, favicons, and preloading resources. Use appropriate attributes like rel and href to specify the type and location of the linked resource, and other attributes like "media," "sizes," "hreflang," and "as" to optimize your website's performance and user experience.



Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram