Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Anchor rel Property
The HTML DOM Anchor rel property returns or sets the rel attribute of an anchor element. The rel attribute specifies the relationship between the current document and the linked document, providing semantic meaning to links for browsers, search engines, and assistive technologies.
Syntax
Following is the syntax to return the rel property −
anchorObject.rel
Following is the syntax to set the rel property −
anchorObject.rel = "value"
Parameters
The value parameter accepts a string containing one or more space-separated link types. Common values include −
nofollow − Instructs search engines not to follow the link
noopener − Prevents the new page from accessing the window.opener property
noreferrer − Prevents the browser from sending the referrer header
external − Indicates the link leads to an external site
help − Links to help documentation
bookmark − Links to a bookmark or permalink
Return Value
The property returns a string representing the value of the rel attribute, or an empty string if the attribute is not set.
Example − Getting the rel Property
Following example demonstrates how to retrieve the rel attribute value from an anchor element −
<!DOCTYPE html>
<html>
<head>
<title>Anchor rel Property - Get Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML DOM Anchor rel Property</h2>
<p><a id="externalLink" rel="nofollow external" href="https://www.example.com/">
Visit Example Site</a></p>
<button onclick="getRel()">Get rel Property</button>
<p id="result"></p>
<script>
function getRel() {
var anchor = document.getElementById("externalLink");
var relValue = anchor.rel;
document.getElementById("result").innerHTML = "rel attribute: " + relValue;
}
</script>
</body>
</html>
The output displays the rel attribute value when the button is clicked −
HTML DOM Anchor rel Property Visit Example Site (link) [Get rel Property] (button) After clicking: rel attribute: nofollow external
Example − Setting the rel Property
Following example shows how to modify the rel attribute value using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Anchor rel Property - Set Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Modify rel Attribute</h2>
<p><a id="myLink" rel="bookmark" href="https://www.tutorialspoint.com/">
TutorialsPoint</a></p>
<button onclick="showCurrentRel()">Show Current rel</button>
<button onclick="changeRel()">Change to "noopener noreferrer"</button>
<p id="display"></p>
<script>
function showCurrentRel() {
var link = document.getElementById("myLink");
document.getElementById("display").innerHTML = "Current rel: " + link.rel;
}
function changeRel() {
var link = document.getElementById("myLink");
link.rel = "noopener noreferrer";
document.getElementById("display").innerHTML = "Updated rel: " + link.rel;
}
</script>
</body>
</html>
The output demonstrates both getting and setting the rel property −
Modify rel Attribute TutorialsPoint (link) [Show Current rel] [Change to "noopener noreferrer"] (buttons) After "Show Current rel": Current rel: bookmark After "Change to...": Updated rel: noopener noreferrer
Example − Multiple rel Values
Following example demonstrates working with multiple space-separated rel values −
<!DOCTYPE html>
<html>
<head>
<title>Multiple rel Values</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Working with Multiple rel Values</h2>
<p><a id="socialLink" rel="nofollow noopener external" href="https://www.facebook.com/">
Facebook Profile</a></p>
<button onclick="analyzeRel()">Analyze rel Values</button>
<div id="analysis"></div>
<script>
function analyzeRel() {
var link = document.getElementById("socialLink");
var relValue = link.rel;
var relArray = relValue.split(' ');
var output = "<p>Full rel attribute: " + relValue + "</p>";
output += "<p>Individual values:</p><ul>";
for (var i = 0; i < relArray.length; i++) {
output += "<li>" + relArray[i] + "</li>";
}
output += "</ul>";
document.getElementById("analysis").innerHTML = output;
}
</script>
</body>
</html>
The output shows how to parse multiple rel values −
Working with Multiple rel Values Facebook Profile (link) [Analyze rel Values] (button) After clicking: Full rel attribute: nofollow noopener external Individual values: ? nofollow ? noopener ? external
Common Use Cases
The rel property is commonly used for −
SEO Control − Using
nofollowto prevent search engines from following specific linksSecurity − Adding
noopenerandnoreferrerto external links for securityLink Classification − Marking links as
externalorbookmarkfor styling or behaviorAccessibility − Providing semantic information to assistive technologies
Browser Compatibility
The anchor rel property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The property provides both read and write access to the rel attribute consistently across all platforms.
Conclusion
The HTML DOM Anchor rel property provides JavaScript access to the rel attribute, enabling dynamic modification of link relationships. It supports both single and multiple space-separated values, making it essential for SEO control, security implementation, and semantic markup in modern web development.
203 Views
