Open In App
Related Articles

HTML <link> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The HTML <link> tag 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 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 ValueDescription
charsetSpecifies the character encoding for the HTML-linked document.
crossOriginAssign the CORS (Cross-Origin Resource Sharing) settings of the linked document.
disabledSpecifies that the linked document is disabled.
hrefSpecifies the URL of the linked document.
hreflangSpecifies the language for a linked document.
mediaSpecifies what media/device the target resource is optimized for.
relSpecifies the relationship between the current and the linked document.
revAssigns the reverse relationship from the linked document to the current document.
sizesSpecifies the sizes of the icon for visual media; works when rel=”icon”.
targetSpecifies the window or a frame where the linked document is loaded.
typeSets/returns the content type of the linked document.

Example 1: Implemenattion to show <link> tag & declaration of 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>

                    

CSS

body {
    background-color: green;
    color: white;
}

                    

 Output:

Screenshot-2024-01-19-102415

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

h1{
    color: green;
}

                    

Output:

HTML tag

Supported Browsers:

  • Google Chrome 1
  • Microsoft Edge 12
  • Firefox 1
  • Safari 12.1
  • Opera 4


Last Updated : 23 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads