HTML <link> Tag
Last Updated :
08 Mar, 2024
The HTML <link> tag links the document with an external resource. The link tag is mainly used to link to external style sheets. This element can appear multiple times but it goes only in the head section.
The <link> element is empty, it contains attributes only. The values in the link element denote how the item is being linked to & is related to the containing document.
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body style="background-color: green; color: green;">
<h1>GeeksforGeeks</h1>
<h3>HTML Link Tag</h3>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</body>
</html>
|
 Output:
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 “GeeksforGeeks,” 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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Tag</title>
<link rel="stylesheet" type="text/css"
href="style.css" hreflang="en-us">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML Link Tag</h2>
</body>
</html>
|
CSS
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...