HTML <link> Tag
The <link> tag defines the relationship between the current document and an external resource, commonly used for style sheets or favicons. It’s an empty element containing only attributes like href and rel, facilitating external resource inclusion in HTML documents.
Note: The <link> tag also supports the Global Attributes and Event Attributes in HTML.
Syntax:
<link rel="stylesheet" href="styles.css">
Attributes values:
| Attribute Value | Description |
|---|---|
| charset | Specifies the character encoding for the HTML-linked document. |
| crossOrigin | Assign the CORS (Cross-Origin Resource Sharing) settings of the linked document. |
| disabled | Specifies that the linked document is disabled. |
| href | Specifies the URL of the linked document. |
| hreflang | Specifies the language for a linked document. |
| media | Specifies what media/device the target resource is optimized for. |
| rel | Specifies the relationship between the current and the linked document. |
| rev | Assigns the reverse relationship from the linked document to the current document. |
| sizes | Specifies the sizes of the icon for visual media; works when rel=”icon”. |
| target | Specifies the window or a frame where the linked document is loaded. |
| type | Sets/returns the content type of the linked document. |
HTML link Tag Examples
Example: Implementation to show <link> tag & declaration of the rel attribute & type attribute inside the HTML Tag.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body style="background-color: green; color: green;">
<h1>w3wiki</h1>
<h3>HTML Link Tag</h3>
<p>
A Computer Science portal for Beginner.
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</body>
</html>
Output:
Tag" height="202" src="/public/files/Screenshot-2024-01-19-102415.png" width="586">
Explanation:
- In this example we setup with a <head> section for metadata and a <body> section for content.
- The <link> tag is used within the <head> section to link an external stylesheet (style.css), enabling consistent styling across the HTML document.
- we Includes headings (<h1> and <h3>) and a paragraph (<p>) providing information about “w3wiki,” a computer science portal.
- The appearance of the HTML elements can be controlled and enhanced using the styles defined in the linked style.css file.
Example 2: Implementation with hreflang attribute whose value is set to”en-us” which will specify the language of the linked document. And we are linking an external CSS file that contains a color property for the h1 tag which is set to green.
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Tag</title>
<link rel="stylesheet" type="text/css"
href="style.css" hreflang="en-us">
</head>
<body>
<h1>w3wiki</h1>
<h2>HTML Link Tag</h2>
</body>
</html>
h1{
color: green;
}
Output:
HTML link Tag with attributes
Explanation:
- In this example The <link> tag associates the HTML document with an external stylesheet named “style.css”.
- The “style.css” file contains a rule that sets the color of <h1> elements to green.
- By linking to an external stylesheet, consistent styling can be applied to multiple HTML documents.
Supported Browsers
The browser supported by value attribute in option tag are listed below:
Contact Us