HTML <link> Tag - GeeksforGeeks

16 Dec, 2021
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 93.0 & above
Internet Explorer 11.0
Microsoft Edge 93.0
Firefox 92.0 & above
Safari 14.1
Opera 79.0
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Akanksha_Rai
bhaskargeeksforgeeks
HTML-Tags
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript