Table of contents

HTML <link> Tag: Definition, Syntax, and Examples

The HTML link tag is used to connect external resources to a webpage. It is most commonly used to link CSS stylesheets, icons, preconnect resources, fonts, and more. The link tag is a self-closing tag and must always be placed inside the head section of an HTML document.

It plays an important role in performance and SEO as it helps browsers load necessary files efficiently. Every website uses the HTML link tag to apply external stylesheet designs and enhance the visual appearance of pages.

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

rel specifies the relationship between the current document and the linked file, while href contains the path to the external resource.

Example 1: Linking an External CSS File

plaintext
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Scholar247 Example</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>

In this example, the external CSS file named styles.css is linked using the link tag. All CSS styles written inside that file will be applied to this page.

Example 2: Adding a Favicon

plaintext
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Scholar247 - Web Tutorials</title>
  <link rel="icon" href="favicon.ico">
</head>

<body>
  <p>Welcome to Scholar247!</p>
</body>

</html>

This example adds a favicon to the browser tab. Favicons improve branding and help users identify websites easily.

The most used attributes are:

• rel: Defines the relationship to the external resource (example: stylesheet, icon, preconnect)
• href: Specifies the URL path of the file or resource
• type: Defines the MIME type of the linked document
• media: Applies the resource only to specific devices or screen sizes
• sizes: Sets icon sizes when linking favicons
• crossorigin: Controls cross-origin requests

These attributes help in optimizing functionality and performance when linking different types of external resources.

• Always place the link tag inside the head section
• Use proper rel attribute values for accurate browser behavior
• Link minified CSS files to improve page speed
• Use preconnect and preload links for performance optimization
• Ensure correct paths for all external files to avoid loading errors

The link tag connects external resources like CSS files, icons, and fonts to an HTML document.

Q2: Can the link tag be used inside the body?

No. The link tag must always be placed inside the head section for proper functioning.

Yes. It helps load important resources like stylesheets and favicons, improving user experience and ranking signals.

Yes. The HTML link tag does not require a closing tag.

It is mainly used to link external CSS files to style a webpage.

HTML

Related Articles