HTML - <link> Tag

Quiz

Introduction to <link> Tag

The HTML <link> tag is a self closing tag that is used to define the relationship between the current document and external resources, such as style-sheet, icons and other linked documents.

It is commonly used within the <head> section of an HTML document to link the external resources that improves the functionality or appearance of the page. It also uses the attributes like rel, href and type to specify the relationship.

Syntax

Following is the syntax of HTML <link> tag −

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

Attributes

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 which 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.

Example : Linking External CSS

Let's look at the following example, where we are going to link the external CSS file style.css to the HTML document.

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;
}

Example : Using Attributes

Consider the following example, where we are going to use the rel, href and size attributes along with the <link> tag.

<!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>

Example : Favicon for Website

In the following example, we are going to create the favicon on the browser using the <link> tag.

<!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>

Example : Providing Print Media

Following is the example, where are going to provide the media type or query inside the media attribute.

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

Print Page