Open In App

How to specify the relationship between the current document and the target URL in HTML5 ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

We specify the relationship between the current document and the target URL by using a <link> tag in HTML. A link tag is used to define a link between a document and an external resource. It is used only when the href attribute is present.

Approach:

  • To specify the relationship between the current and the linked document use the rel attribute

Attribute Values:

  • alternate: It specifies the alternative link of the document(i.e. print page, translate, or mirror).
  • author: It defines the author of the link
  • dns-prefetch: It Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin
  • help: It specifies a link to a help document. Example: <link rel=”help” href=”/help/”>
  • icon: It specifies an import icon in a given document
  • license: It specifies a link to copyright information for the document
  • next: It provides the link to the next document in series
  • pingback: It specifies the address of the pingback serve
  • preconnect: It specifies the target should be preemptive to the origin resource
  • prefetch: It specifies that the target document should be cached.
  • preload: It specifies that the browser must preemptively fetch and cache
  • prerender: It specifies that the browser should load
  • prev: It specifies the previous document in a selection
  • search: It specifies the search tool for the document.
  • stylesheet: It Imports a style sheet

Syntax:

 <link rel="stylesheet" type="text/css" href="styles.css">

 Example 1: In this example, we will specify the relationship between the current document and the target URL

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          type="text/css" href="styles.css">
</head>
   
<body>
    <h1>GeeksforGeeks</h1>
    <h2>
        How to specify the relationship between the current
          document and the target URL in HTML5?
      </h2>
</body>
</html>


CSS Code: The following is the content for the code “styles.css” used in the above HTML code.

h1 , h2 
{
   color:green;
   text-align: center;
   font-style: italic;
   font-weight: bold;
}

Output:

link document

Example 2: In this example, we will see the use of <link> tag in HTML.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
        type="text/css"
        href="index_screen.css">
    <link rel="stylesheet"
        type="text/css"
        href="index_print.css">
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <p><a href="https://ide.geeksforgeeks.org/tryit.php"
        target="_blank">
    Click here
    </a>
    </center>
</body>
</html>


Output:

 



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads