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+