The HTML <link> tag defines the relationship between the current document and an external resource, often for stylesheets or favicons. It's an empty element with attributes like href and rel.
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 | Assigns 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. |
| 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 1: Basic Implementation
This example demonstrates the use of the <link> tag to link an external stylesheet and the declaration of the rel and type attributes.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<!--Driver Code Ends-->
<head>
<title>HTML Link Tag</title>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<!--Driver Code Starts-->
<body style="background-color:
green; color: white;">
<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>
<!--Driver Code Ends-->
Example 2: Using hreflang Attribute
This example uses the hreflang attribute to specify the language of the linked document and links an external CSS file that styles <h1> tags.
<!DOCTYPE html>
<html>
<head>
<title>hreflang Example</title>
<link rel="alternate"
hreflang="fr"
href="https://example.com/fr/">
<link rel="alternate"
hreflang="es"
href="https://example.com/es/">
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML hreflang Tag</h2>
</body>
</html>
h1 {
color: green;
}