HTML - <link> Tag

The HTML <link> tag specifies a 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).

The <link> tag includes the global attributes as follows

  • rel − This attribute stands for a relationship of the linked document to the current document.
  • href − This attribute specifies the URL of the linked resource.
  • sizes − This attribute defines the sizes of the icons for visual media contained in the resource.
  • type − This attribute is used to define the type of the content to be linked.
  • title − The title attribute has special semantics on the <link> element.

Syntax

Following is the syntax for HTML <link> tag −

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

Example

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

When we run the above code, it will generate an output consisting of the text with a CSS property displayed on the webpage.

Example

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>

On running the above code, the output window will pop up displaying the text with a CSS property on the webpage.

Example

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>

When we run the above code, it will generate an output consisting of the text with a CSS property displayed on the webpage.

Example

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

On running the above code, the output window will pop up displaying the text with a CSS property on the webpage.

html_tags_reference.htm
Advertisements