What is the HTML <link> tag ?
HTML <link> tag defines the relationship between the current HTML document and an external resource.
HTML <link> tag represents the relationship between a current document and one or more external CSS stylesheets.
HTML <link> tags is placed inside the <head> section of the document.
How HTML <link> tag works ?
HTML <link> tag is most often used to link to external style sheets.
HTML <link> tag loads the external CSS style sheet files along with the HTML document.
HTML <link> tag is also used to establish site icons like “favicon”, “style icons” and other “icons” inside the home screen.
Why is the HTML <link> tag used ?
HTML <link> tag is used to load an external stylesheets into an HTML document.
CSS properties can be written inside the HTML document but if its a big website and it contains lot of UI components, then we have to write lot of code inside the same HTML document and this results in a lengthy HTML document.
To avoid this lengthy HTML document, HTML <link> tag is used to have the CSS codes in separate file and we can load the CSS files along with the HTML document.
HTML <link> tag helps us in debugging the CSS properties easily.
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<link rel="stylesheet" type="text/css" href="styles.css">
Example :
<!DOCTYPE html>
<html>
<head>
<title>HTML Link Tag</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to CStechbook</h1>
<h2>HTML Link Tag</h2>
</body>
</html>
CSS
h1 {
color: blue;
}
h1, h2{
text-align: left;
}
Output :
<link> Tag Attributes
HTML <link> tag support following specific attributes.
| Sno | Attributes | Value | Description |
|---|---|---|---|
| 1 | crossorigin | anonymous use-credentials | Specify how to handle CORS. anonymous Cross-origin request perform without any credential. use-credentials Cross-origin request perform with sent credential. |
| 2 | href | URL | Specify the URL of the external linked resource. |
| 3 | hreflang | lang_code | Specify the language of the text in the external linked resource. |
| 4 | media | all screen speech | Specify the media device, external resource will be displayed for that device. The default value is all. |
| 5 | rel | alternate author canonical help icon license manifest next pingback prefetch preload prerender prev search shortlink stylesheet | Required. Specify the relationship of the external linked document. |
| 6 | sizes | HEIGHTxWIDTH any | Specify the size of icons (favicons) that are linked externally. Example: sizes=”any” (any size) sizes=”16×16″ (1 size) sizes=”16×16 32×32 64×64″ (3 sizes) |
| 7 | type | MIME_type | Specify the mime type of the external linked document. |
| Following attribute has been removed in HTML5. | |||
| 8 | charset | charset | Specify the character encoding of the external linked document. |
| 9 | rev | alternate author canonical help icon license manifest next pingback prefetch preload prerender prev search shortlink stylesheet | Specify the reverse relationship of the external linked resource to current document. |
| 10 | target | _blank _parent _self _top | Specify the location where to load external linked document. |
Global Attributes
HTML <link> tag does not support any global attributes.
Event Attributes
HTML <link> tag does not support any event attributes.
Browser Compatibility
| Sno | Browser | Support |
| 1 | Chrome | Yes |
| 2 | Firefox | Yes |
| 3 | Edge | Yes |
| 4 | Opera | Yes |
| 5 | Safari | Yes |
| 6 | Internet Explorer | Yes |