HTML - <link> Tag

HTML <link> tag specifies relationship between the current document and an external resource.

The <link> tag is mostly used to link stylesheets. It is also used to set site icons (both favicon-style icons and icons for the home screens and apps on mobile).

Syntax

<link href="..." rel=".."/>

Attribute

HTML link tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed below.

Attribute	Value	Description
crossorigin	anonymous use-credentials	Specifies how the element handles cross-origin requests.
href	URL	Specify the link page whihc we wants to link.
hreflang	language_code	Spefeicy the language of the attached link.
media	media_query	Specifies what media/device the linked document is optimized for.
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information to send with the link.
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	Define the relation between the current and linked url document.
sizes	HeightxWidth any	Specifies the size of the linked resource. Only for rel="icon".
title		Specifies a preferred or an alternate stylesheet.
type	media_type	Specify the media type of the inked url document.

Examples of HTML link Tag

Bellow examples will illustrate the usage of link tag. Where, when and how to use link tag. In each examle we tried to show the different use cases of <link> tag.

Linking external Style sheet

In the following example, we are creating an external resource link element using the <link> tag to link the CSS file with the HTML file. We pass the CSS file name "style.css" as a source to the href attribute and pass the "stylesheet" to the rel attribute source.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <!--create a link tag-->
   <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

style.css

body{
   background-color: green;
}
h1{
   color: white;
   font-size: 40px;
}

Linking favicon on the Tab

Following is another example of the HTML <link> tag. Here, we are establishing the favicon on the browser using the <link> tag with its rel and href attribute. We have given the local image name "download.png" as the link destination to the href attribute and given the rel attribute source as "icon".

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Anchor Tag</title>
   <!--create a link tag-->
   <link rel="icon" type="image/x-icon" href="download.png">
   <style>
      body {
         background-color: aquamarine;
         font-family: initial;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <h1> The
      <pre>
         <link>
      </pre> tag with the favicon icon......
   </h1>
</body>
</html>

Linking external resources with Attributes

In this example, we are creating an external resource link using the <link> tag with its rel, href, and sizes attribute to establish and manage the size of the favicon on the browser.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Link Tag</title>
   <!--create a link tag-->
   <link rel="icon" type="image/x-icon" 
         href="simply-easy-learning.png" sizes="500x500">
   <style>
      body {
         background-color: rgb(14, 116, 211);
         font-family: initial;
         font-size: 16px;
         color: white;
      }
   </style>
</head>
<body>
   <h1>favicon with
      <pre>
         <link>
      </pre> tag
   </h1>
</body>
</html>

Defining print Media

You can also provide a media type or query inside a media attribute, this resource will then only be loaded if the media condition is true. For example −

If you print this page, or open it in print preview, you will see that it is styled with the media="print" stylesheet. The "print" stylesheet contains black text on white background.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Link Tag</title>
   <!--create a link tag-->
   <link href="print.css" rel="stylesheet" media="print" />
   <link href="style.css" rel="stylesheet" 
         media="screen and (max-width: 680px)" />
</head>
<body>
   <h1>The
      <pre>
         <link>
      </pre> tag with media attribute
   </h1>
</body>
</html>

print.css

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

style.css

body{
   background-color: green;
}
h1{
   color: white;
   font-size: 40px;
}

Supported Browsers

Tag
link	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm