How to add a resource reference in HTML?


In HTML the <link> tag is used to add a resource reference. The link defines the relationship between the external document and current document.

The <link> tag is also used to link external style sheets and to add favicon to our websites, <link> tag consists of attribute values. Following is the usage of <link> tag in HTML -

<link rel="stylesheet" href="styles.css">

The <link> tag is supported by almost all browsers and it also supports global and event attributes.

Attributes

Attributes of the <link> tag are shown below −

  • crossorigin − The value of crossorigin attribute is anonymous use-credentials, it is used to specify how the element handles cross-origin requests.

  • href − The value of href attribute is URL, which is used to specify the location of the linked document.

  • hreflang − The value used for hreflang is language code, which is used to specify the language of the text in the linked document.

  • media − The value used for media is media query, it Specifies on what device the linked document will be displayed.

  • referrerpolicy − The values used for referrerpolicy are no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url, the refeerepolicy attribute is used to specify which referrer to use when fetching the resource.

  • rel − The values used for rel attribute are alternate, author, dns-prefetch, help, icon, license, next, pingback, preconnect, prefetch, preload, prerender, prev, search, stylesheet, rel attribute is used to Specifies the relationship between the current document and the linked document.

  • sizes − The value used for size attribute is HeightxWidth , it is used to specifies the size of the linked resource. Only for rel="icon".

  • title − The title attribute is used to defines a preferred or an alternate stylesheet.

  • type − The type attribute uses the value as media type and used to Specifies the media type of the linked document.

Example

In the following example we are trying to add a resource reference in HTML −

<!DOCTYPE html>
<html>
<head>
   <title>HTML link Tag</title>
   <link rel="stylesheet" href="stylenew.css">
</head>
<body>
   <div id="contentinfo">
      <h1>TutorialsPoint</h1>
      <h2>Technical content</h2>
      <p>Welcome to our website. We provide tutorials on various subjects.</p>
   </div>
</body>
</html>

Example

Following is another example to add resources as references in HTML.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Link Tag</title>
   <link rel="stylesheet" type="text/css" href="stylenew.css" hreflang="en-us">
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>HTML Link Tag</h2>
</body>
</html>

Updated on: 10-Oct-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements