Skip to content
Related Articles

Related Articles

HTML | DOM Anchor rel Property

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Oct, 2021

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

  • It returns the Anchor rel property. 
anchorObject.rel
  • It is used to set the Anchor rel property. 
anchorObject.rel = "value"

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.
  • bookmark: It specify a related document.
  • help: It specifies a help document.
  • license: It defines a copyright information for the document.
  • next: It defines the next document in a selection.
  • nofollow: It is used by Google, to specify that the Google search spider should not follow that link and mostly used for paid links.
  • noreferrer: It is used to Specify that the browser should not send a HTTP referrer header if the user follows the hyperlink.
  • prefetch: It specifies that the target document should be cached.
  • prev: It specify the previous document in a selection.
  • search: It specify the search tool for the document.
  • tag:It specifies a tag keyword for the current document.

Return Value: It returns a string value which represents the relation between the current document and the linked document.
Example 1: This example returns the Anchor rel Property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Anchor rel Property
    </title>
</head>
     
<body>
    <center>
        <h1>GeeksForGeeks</h1>
         
        <h2>DOM Anchor rel Property</h2>
         
         
<p>Welcome to
            <a href =
            id="GFG" rel="nofollow" target= "_self">
                GeeksforGeeks
            </a>
        </p>
  
         
        <button onclick = "myGeeks()">Submit</button>
         
        <p id = "sudo" style="color:green;font-size:25px;"></p>
  
         
        <!-- Script to return Anchor rel Property -->
        <script>
            function myGeeks() {
                var x = document.getElementById("GFG").rel;
                document.getElementById("sudo").innerHTML = x;
            }
        </script>
    </center>
</body>
 
</html>   

Output: 
Before Clicking on Button: 
 

After Clicking on Button: 
 

Example 2: This example sets the Anchor rel Property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Anchor rel Property
    </title>
</head>
     
<body>
    <center>
        <h1>GeeksForGeeks</h1>
         
        <h2>DOM Anchor rel Property</h2>
         
         
<p>Welcome to
            <a href =
            id="GFG" rel="nofollow" target= "_self">
                GeeksforGeeks
            </a>
        </p>
  
         
        <button onclick = "myGeeks()">Submit</button>
         
        <p id = "sudo" style="color:green;font-size:25px;"></p>
  
         
        <!-- Script to set Anchor rel Property -->
        <script>
            function myGeeks() {
                var x = document.getElementById("GFG").rel
                        = "prefetch";
                         
                document.getElementById("sudo").innerHTML
                        = "The value of the rel attribute "
                        + "was changed to " + x;
            }
        </script>
    </center>
</body>
 
</html>   

Output: 
Before Clicking on Button: 
 

After Clicking on Button: 
 

Supported Browsers: The browser supported by DOM Anchor rel property are listed below: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!