Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to use the tag to define a relationship to an external resource?
The <link> tag is used in HTML to define a relationship to an external resource. It is most commonly used to link external style sheets to HTML documents. The tag is placed inside the <head> section and is a self-closing tag, meaning it does not require a closing tag.
Syntax
<link rel="relationship" href="path-to-resource">
Key Attributes
The <link> tag uses several important attributes:
- rel - Specifies the relationship between the current document and the linked resource
- href - Specifies the URL of the external resource
- type - Specifies the media type of the linked resource (optional)
Linking External CSS Files
The most common use of the <link> tag is to include external CSS stylesheets. Here's a complete example:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="/css/mystyles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This paragraph is styled using external CSS.</p>
<div class="highlight">This is a highlighted section.</div>
</body>
</html>
The corresponding CSS file (mystyles.css) would contain:
h1 {
color: #2c3e50;
font-family: Arial, sans-serif;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.6;
color: #34495e;
}
.highlight {
background-color: #f39c12;
padding: 10px;
border-radius: 5px;
color: white;
}
Other Common Uses
Besides stylesheets, the <link> tag can define other relationships:
<!-- Favicon --> <link rel="icon" href="/images/favicon.ico"> <!-- Web fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> <!-- Preload resources --> <link rel="preload" href="/js/script.js" as="script">
Benefits of External CSS
| Advantage | Description |
|---|---|
| Reusability | Same CSS file can be used across multiple HTML pages |
| Maintainability | Changes in one CSS file update styling across entire website |
| Performance | CSS files are cached by browsers, reducing load times |
| Organization | Keeps HTML structure separate from styling |
Conclusion
The <link> tag is essential for connecting external resources to HTML documents. It's most commonly used for CSS stylesheets, providing better organization and maintainability for web projects.
Updated on: 2026-03-15T23:18:59+05:30
324 Views
Advertisements