Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Link rel Property

  • Difficulty Level : Basic
  • Last Updated : 13 Aug, 2021

The HTML | DOM Link rel Property in HTML DOM is used to set or return the value of the rel attribute of a linked document. The rel attribute is used to specify the relation between the current document and the linked document.
 

Syntax:  

  • It returns the rel property.
    linkObject.rel
  • It is used to set the rel property.
    linkObject.rel = relationship

Property Values:  

  • alternate: It defines an alternate version of the document i.e. print page, translated or mirror.
  • author: It defines the author of the document.
  • dns-prefetch: It is used to specify that the browser should preemptively perform DNS resolution for the target resource’s origin
  • help: It provides a help link.
  • icon: It is used to import an icon to represent the document.
  • licence: It defines a copyright information for the document.
  • next: It provides a link to the next document in a selection.
  • pingback: It is used to provides the address of pingback server which is used to handle pingbacks of the current document.
  • preconnect: It is used to specifies that the browser should preemptively connect to the target resource’s origin.
  • prefetch: It is used to specifies that the browser should preemptively fetch and cache the target resource, it is likely to be required for follow-up navigation
  • preload: It is used to specify the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination which is given by the “as” attribute.
  • prev: It specify the previous document in a selection.
  • search: It specify a link search through the document.
  • stylesheet:It is to import the style sheet.

Example-1: This Example returns a rel Property. 

html




<!DOCTYPE html>
<html>
  
<head>
    <link id="linkid"
          rel="stylesheet" 
          type="text/css" 
          href="styles.css" 
          sizes="16*16">
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
    <h2>DOM Link rel Property</h2>
  
    <button onclick="gfg()">Get URL
    </button>
  
    <p id="pid"
       style="font-size:25px;
              color:green;"></p>
  
  
    <script>
        function gfg() {
  
            // Access link element. 
            var NEW = document.getElementById(
                "linkid").rel;
            document.getElementById(
                "pid").innerHTML = NEW;
        }
    </script>
  
</body>
  
</html>

Output: 
Before Clicking On Button : 
 



After Clicking On Button : 
 

Example-2: This Example sets the rel Property. 

html




<!DOCTYPE html>
<html>
  
<head>
    <link id="linkid"
          rel="stylesheet"
          type="text/css"
          href="styles.css"
          sizes="16*16">
</head>
  
<body style="text-align:center;">
    <h1>GeeksForGeeks</h1>
    <h2>DOM Link rel Property</h2>
  
    <button onclick="gfg()">Get URL
    </button>
  
    <p id="pid" 
       style="font-size:25px;
              color:green;">
  </p>
  
  
    <script>
        function gfg() {
  
            // Access link element. 
            var NEW = document.getElementById(
                "linkid").rel = "alternate";
            document.getElementById(
                "pid").innerHTML =
        "The value of the rel attribute was changed to "
            + NEW;
        }
    </script>
  
</body>
  
</html>

Output : 
Before Clicking On Button: 
 

After Clicking On Button: 
 

Supported Browsers: 

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :