HTML - HTML <link> Element and External Resource Linking

The HTML <link> element is used to establish a relationship between an HTML document and an external resource. It is most commonly used to connect an HTML page with an external CSS stylesheet, but it can also be used for favicons, alternate versions of a page, preloaded resources, and other linked resources.

Unlike the <a> element, which creates a clickable hyperlink for users, the <link> element generally provides information to the browser about a resource that is related to the current document. The <link> element is normally placed inside the <head> section of an HTML document.

Basic Syntax

<link rel="stylesheet" href="styles.css">

Here:

<link> is the HTML element used to define the relationship with an external resource.
rel specifies the relationship between the current document and the linked resource.
href specifies the location or URL of the external resource.

For example:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This page uses an external stylesheet.</p>
</body>
</html>

In this example, the browser loads styles.css and applies its CSS rules to the HTML page.

Why Use the `<link>` Element?

The <link> element is important because it allows HTML documents to use resources that are stored separately from the HTML file.

For example, instead of placing all CSS rules directly inside an HTML document, a developer can create a separate file:

index.html
styles.css

The HTML file can then reference the stylesheet:

<link rel="stylesheet" href="styles.css">

This separation makes websites easier to organize, maintain, and update.

The `rel` Attribute

The rel attribute is one of the most important attributes of the <link> element. It tells the browser what kind of relationship exists between the current HTML document and the linked resource.

For example:

<link rel="stylesheet" href="styles.css">

Here, stylesheet tells the browser that the linked file is a stylesheet.

Another example is:

<link rel="icon" href="favicon.ico">

Here, icon indicates that the resource is the page's icon.

The value of rel determines how the browser interprets the linked resource.

The `href` Attribute

The href attribute specifies the location of the resource.

It can contain a relative path:

<link rel="stylesheet" href="css/style.css">

It can also contain an absolute URL:

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

A relative path is commonly used when the resource belongs to the same website.

Linking an External CSS File

The most common use of <link> is to connect an HTML page to an external CSS file.

HTML:

<link rel="stylesheet" href="style.css">

CSS:

body {
    background-color: lightgray;
}

h1 {
    color: blue;
}

The browser reads the <link> element and loads the CSS file. The styles defined in the CSS file are then applied to the HTML elements.

Linking a Favicon

A favicon is the small icon associated with a webpage. It can appear in the browser tab, bookmarks, or other browser interfaces.

Example:

<link rel="icon" href="favicon.ico">

A PNG image can also be used:

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

The type attribute indicates the MIME type of the linked resource.

Linking Different Stylesheets

A webpage can use more than one stylesheet.

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="responsive.css">

The browser loads each stylesheet according to the relationships and conditions specified.

This can be useful for organizing CSS into separate files.

Using `media` with `<link>`

The media attribute can specify the conditions under which a linked stylesheet should apply.

For example:

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

This stylesheet is intended for printing.

Another example is:

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

This associates the stylesheet with screens whose width is 600 pixels or less.

Linking an Alternate Version of a Page

The <link> element can also describe an alternate version of a document.

For example:

<link rel="alternate" href="https://example.com/feed.xml" type="application/rss+xml">

This tells the browser and other software that the page has an alternate RSS representation.

The alternate relationship can also be used in other contexts, depending on the resource being linked.

Preloading Resources

The <link> element can be used with rel="preload" to tell the browser that a resource is important and should be fetched early.

For example:

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

Here:

rel="preload" indicates that the resource should be fetched early.
href identifies the resource.
as="font" tells the browser what type of resource is being loaded.
type specifies the resource's MIME type.
crossorigin controls the cross-origin fetching behavior needed for this font resource.

Preloading should be used carefully because unnecessarily preloading resources can waste network bandwidth.

The `type` Attribute

The type attribute can specify the MIME type of the linked resource.

For example:

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

For a stylesheet:

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

However, for ordinary CSS stylesheets, specifying type="text/css" is generally unnecessary in modern HTML because CSS is the default stylesheet language.

The `crossorigin` Attribute

Some external resources are loaded from another origin. The crossorigin attribute can control how the browser performs such requests.

For example:

<link rel="stylesheet" href="https://example.com/style.css" crossorigin>

The exact behavior depends on the type of resource and the server's CORS configuration.

This attribute is particularly relevant when working with resources such as fonts and certain preloaded resources.

`<link>` Does Not Usually Have a Closing Tag

The <link> element is a void element. It does not contain content and does not require a closing tag.

Correct:

<link rel="stylesheet" href="style.css">

Not necessary:

<link rel="stylesheet" href="style.css"></link>

HTML void elements are written without closing tags.

Difference Between `<link>` and `<a>`

The <link> and <a> elements both use the href attribute, but they have different purposes.

<link> is primarily used to associate the document with an external resource:

<link rel="stylesheet" href="style.css">

<a> creates a hyperlink that users can click:

<a href="about.html">About Us</a>

Therefore, <link> is generally intended for relationships between documents and resources, while <a> is intended for user navigation.

Difference Between `<link>` and `<style>`

The <link> element is commonly used for an external stylesheet:

<link rel="stylesheet" href="style.css">

The <style> element contains CSS directly within the HTML document:

<style>
    h1 {
        color: blue;
    }
</style>

External stylesheets are often preferred for larger websites because the CSS can be reused across multiple HTML pages.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Student Website</title>

    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1>Welcome to the Student Website</h1>
    <p>This page is connected to an external CSS stylesheet.</p>

</body>
</html>

In this example, two <link> elements are used. The first connects the webpage to a favicon, while the second connects the webpage to an external CSS stylesheet.

Advantages of the `<link>` Element

The <link> element provides several advantages:

Separation of HTML and CSS
It allows presentation rules to be stored separately from the HTML structure.
Code Reusability
One stylesheet can be linked to multiple HTML pages.
Better Organization
External resources can be maintained in separate files.
Easier Maintenance
Changes to a shared stylesheet can affect multiple pages without modifying every HTML document.
Browser Resource Management
Certain link relationships allow browsers to discover, preload, or otherwise manage resources more effectively.

Important Points to Remember

The <link> element is normally placed inside the <head> section. The rel attribute describes the relationship between the HTML document and the external resource, while href identifies the resource's location. The most common use is linking an external CSS stylesheet, but <link> can also be used for favicons, alternate resources, preloading, and other browser-recognized relationships.

Understanding the <link> element is important because modern websites depend heavily on external resources such as stylesheets, icons, fonts, and other assets.

HTML - HTML <link> Element and External Resource Linking

Basic Syntax

Why Use the <link> Element?

The rel Attribute

The href Attribute

Linking an External CSS File

Linking a Favicon

Linking Different Stylesheets

Using media with <link>

Linking an Alternate Version of a Page

Preloading Resources

The type Attribute

The crossorigin Attribute

<link> Does Not Usually Have a Closing Tag

Difference Between <link> and <a>

Difference Between <link> and <style>

Complete Example

Advantages of the <link> Element

Important Points to Remember

Why Use the `<link>` Element?

The `rel` Attribute

The `href` Attribute

Using `media` with `<link>`

The `type` Attribute

The `crossorigin` Attribute

`<link>` Does Not Usually Have a Closing Tag

Difference Between `<link>` and `<a>`

Difference Between `<link>` and `<style>`

Advantages of the `<link>` Element