The <link> tag in HTML is used to define a link between a document and 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 being linked to & is related to the containing document.
Syntax:
<link rel="stylesheet" type="text/css" href="styles.css">
Attributes values:
- charset: It is used to specify the character encoding for the HTML linked document.
- crossOrigin: It assigns the CORS settings of the linked document.
- disabled: It is used to specify that the linked document is disabled.
- href: It s used to specify the URL of the linked document.
- hreflang: It is used to specify the language for a linked document.
- media: It is used to specify what media/device the target resource is optimized for.
- rel: It is used to specify the relationship between the current and the linked document.
- rev: It assigns the reverse relationship from the linked document to the current document.
- sizes: It is used to specify the sizes of the icon for visual media and it only works when rel=”icon”.
- target: It is used to specify the window or a frame where the linked document is loaded.
- type: It is used to set/return the content type of the linked document.
Example 1: In this example, we have used the <link> tag & declared the rel attribute & type attribute inside of the tag in HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="style.css">
</head>
<body>
<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:
HTML <link> tag
Example 2: In this example, we have used the 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>
|
Output:
HTML <link> tag
Supported Browsers:
- Google Chrome 1
- Internet Explorer
- Microsoft Edge 12
- Firefox 1
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
26 Jul, 2022
Like Article
Save Article