HTML <link> Tag

The HTML <link> tag is used to define a relationship between the current document and an external resource. It is commonly used to link external stylesheets to a web page but can also be used for other purposes such as linking icons, preloading resources, or establishing relationships with other documents.

The <link> tag is a self-closing tag and must be placed inside the <head> section of the document.

Basic Syntax of HTML <link> Tag

The basic structure of the <link> tag is:

</>
Copy
<link rel="relationship" href="URL" />

The rel attribute specifies the relationship between the current document and the linked resource, and the href attribute specifies the URL of the resource.

Attributes of HTML <link> Tag

  • rel: Specifies the relationship between the current document and the linked resource. Common values include:
    • stylesheet: Links an external CSS file.
    • icon: Links a favicon.
    • alternate: Links to an alternate version of the document.
    • preload: Preloads a resource to improve performance.
  • href: Specifies the URL of the linked resource.
  • type: Specifies the MIME type of the linked resource (e.g., text/css for stylesheets).
  • media: Specifies the media type for the linked resource (e.g., screen, print, all).
  • sizes: Defines the size of icons when linking to favicons.
  • crossorigin: Indicates how the linked resource should be handled regarding cross-origin requests.

Linking an External Stylesheet using link tag

The <link> tag is most commonly used to link an external CSS file:

index.html

</>
Copy
<!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 CSS file for styling.</p>
    </body>
</html>

styles.css

</>
Copy
body {
    background: #ffffaa;
}
h1 {
    color: green;
}
p {
    font-style: italic;
}
Linking an External Stylesheet using link tag

Explanation: The rel="stylesheet" attribute specifies that the linked resource is a CSS file, and the href attribute provides the path to the stylesheet.

Linking a Favicon

You can use the <link> tag to link a favicon for your website:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
    </body>
</html>

Explanation: The rel="icon" attribute indicates that the linked resource is a favicon for the website.

Preloading Resources

The <link> tag can be used to preload resources for improved performance:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
        <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This page preloads a font for faster rendering.</p>
    </body>
</html>

Explanation: The rel="preload" attribute specifies that the resource should be loaded early to improve performance.

Styling the <link> Tag with CSS

Although the <link> tag itself is not displayed, its linked resources can define the styles for the document:

styles.css

</>
Copy
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}

h1 {
    color: #007BFF;
}

Result: The linked CSS file styles the HTML document by applying a font family, background color, and text color.

Practical Applications of the <link> Tag

  • Linking Stylesheets: Attach external CSS files to style your webpage.
  • Adding Favicons: Specify icons for browser tabs and bookmarks.
  • Preloading Resources: Optimize performance by preloading fonts, scripts, or images.
  • Alternate Stylesheets: Provide alternate stylesheets for user customization or themes.
  • Document Relationships: Establish links to alternate versions, such as print-friendly or translated versions.