HTML <link> Tag – Connecting External Resources
📌 Introduction
The <link> tag is used to connect your HTML document to external resources, such as CSS files, icons, and fonts.
It is placed inside the <head> section and does not display anything on the page.
🧱 Basic Syntax
<link rel="relationship" href="URL">
💡 Most Common Example (CSS)
<link rel="stylesheet" href="style.css">
✔ Connects your HTML page to an external CSS file ✔ Applies styles to your webpage
🔍 Explanation of Attributes
1. rel (Relationship)
Defines the relationship between the current document and the linked resource.
Common values:
stylesheet→ for CSSicon→ for favicon
2. href
Specifies the path (URL) to the external file.
Examples:
- Local file:
<link rel="stylesheet" href="style.css">
- External file (CDN):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
🎯 Common Use Cases
1. Linking CSS
<link rel="stylesheet" href="style.css">
2. Adding a Favicon (Tab Icon)
<link rel="icon" href="favicon.ico">
3. Using External Libraries
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
✔ Adds icons or frameworks
🖥️ Important Note
👉 <link> does not create visible content
It only loads external resources that affect your page.
⚠️ Tips & Best Practices
- Always place
<link>inside<head> - Load CSS before JavaScript
- Use meaningful file paths
- Prefer external CSS over inline styles
🚫 Common Mistakes
- Putting
<link>inside<body>❌ - Forgetting
rel="stylesheet"❌ - Incorrect file path ❌ (file won’t load)
🧪 Mini Exercise
Create:
- A file called
style.css - Add this inside it:
body {
background-color: black;
color: white;
}
- Link it to your HTML using
<link>
👉 Open your page and verify the style is applied