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.