Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Anchor rel Property

  • Last Updated : 17 Oct, 2019

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.
  • licence: 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.






<!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.




<!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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :