PUBLISHED ON: FEBRUARY 19, 2021
HTML Link Tag
In HTML, if you want to establish a relationship between the current document and external resource in that case <link> tag is used.
-
The <link> tag also is known as External Resource Link Element.
-
The <link> tag is commonly used to link different stylesheets.
-
The <link> tag in HTML5 is an empty tag that means it does not contain an end tag though it contains various attributes.
-
This tag is also used to establish site icons( both favicon style icons and home screen icons) among other things.
-
We can use <link> tag inside <body> tag but it is recommended to use <link> tag inside <head> tag.
-
It was added into HTML5.
HTML <link> Tag Syntax and Usage
The <link> tag requires a start(opening) tag and not the end tag(closing ) tag because it is an empty tag. Below we have a basic syntax of it.
<link href=" ">
HTML <link> Tag Attributes
The <link> tag supports both global and event attributes and some of the common attributes are given below.
| Attributes |
Description |
| title |
this attribute is used to specify a preferred or an alternate stylesheet |
| href |
this attribute is used to specify the URL of the Linked Document. |
| rel |
this attribute is used to specify a name to the relationship of the linked document with the current document. |
| type |
this attribute is used to specify the media type of the linked URL. |
| hreflang |
this is used to indicate the human language of the linked resource. |
| sizes |
This attribute is used to specify the sizes of the icons for visual media contained in the resource. |
| referrerpolicy |
This attribute is used to specify the referrer to be used while fetching the resources. |
| importance |
This attribute indicates the relative importance of the resource. It can be low, high, auto. |
Example to include Stylesheet on a page:
<link href="abc.css" rel="stylesheet">
The Syntax used to Provide Alternate Stylesheets on a Page
You can also use alternate stylesheets for which the syntax is shown below
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
Default CSS Settings for HTML <link> Tag
Given below are the default CSS settings used by most browsers.
link {
display: none;
}
Browser Support for HTML <link> Tag
Following browsers support this attribute:
-
Firefox 1+
-
Google Chrome 1+
-
Internet Explorer 3+
-
Apple Safari 1+
-
Opera 4+
