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 Link rel Property
The HTML DOM Link rel property sets or returns the relationship between the current document and the linked document. This property corresponds to the rel attribute of the <link> element and specifies how the linked resource relates to the current document.
Syntax
Following is the syntax for getting the rel attribute value −
linkObject.rel
Following is the syntax for setting the rel attribute to a value −
linkObject.rel = valueString
Parameters
valueString − A string that specifies the relationship between the current document and the linked document. It can be one or more space-separated values from the table below.
Return Value
Returns a string representing the relationship between the current and linked document.
Valid Relationship Values
The rel property accepts the following relationship values −
| Value | Description |
|---|---|
| alternate | Provides an alternate representation of the current document |
| author | Provides a link to the author of the linked document |
| dns-prefetch | Specifies that the browser should pre-emptively perform DNS resolution for the target resource's origin |
| help | Provides a link to a help document |
| icon | Imports an icon to represent the document |
| license | Provides copyright information for the linked document |
| next | Provides a link to the next document in a series |
| pingback | Provides the address of the pingback server that handles pingbacks to the current document |
| preconnect | Specifies that the browser should pre-emptively connect to the target resource's origin |
| prefetch | Specifies that the browser should pre-emptively fetch and cache the target resource for future navigation |
| preload | Specifies that the browser must pre-emptively fetch and cache the target resource for current navigation |
| prerender | Specifies that the browser should load the webpage in the background to speed up page load |
| prev | Indicates the previous document in a series |
| search | Provides a link to a resource for searching through the current document |
| stylesheet | Imports a style sheet into the current document |
Example − Getting rel Property
Following example demonstrates how to get the rel property value of a link element −
<!DOCTYPE html>
<html>
<head>
<title>Link rel Property</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="styles.css">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Link rel Property Example</h2>
<div id="output"></div>
<button onclick="showRel()">Show rel Property</button>
<script>
function showRel() {
var extStyle = document.getElementById("extStyle");
var output = document.getElementById("output");
output.innerHTML = "The rel property value is: " + extStyle.rel;
}
</script>
</body>
</html>
The output shows the relationship type of the linked document −
Link rel Property Example
[Show rel Property]
(After clicking: The rel property value is: stylesheet)
Example − Setting rel Property
Following example demonstrates how to change the rel property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Change Link rel Property</title>
<link id="myLink" rel="stylesheet" href="style.css">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Changing rel Property</h2>
<p id="status">Current rel: stylesheet</p>
<button onclick="changeRel('preload')">Change to preload</button>
<button onclick="changeRel('prefetch')">Change to prefetch</button>
<button onclick="changeRel('stylesheet')">Reset to stylesheet</button>
<script>
function changeRel(newRel) {
var myLink = document.getElementById("myLink");
myLink.rel = newRel;
document.getElementById("status").textContent = "Current rel: " + myLink.rel;
}
</script>
</body>
</html>
The buttons allow you to change the relationship type dynamically, updating both the element and the display −
Changing rel Property Current rel: stylesheet [Change to preload] [Change to prefetch] [Reset to stylesheet]
Example − Multiple rel Values
The rel property can contain multiple space-separated values −
<!DOCTYPE html>
<html>
<head>
<title>Multiple rel Values</title>
<link id="multiLink" rel="preconnect dns-prefetch" href="https://fonts.googleapis.com">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple rel Values Example</h2>
<div id="result"></div>
<button onclick="showMultipleRel()">Show Multiple rel Values</button>
<script>
function showMultipleRel() {
var multiLink = document.getElementById("multiLink");
var result = document.getElementById("result");
result.innerHTML = "<p>Full rel value: " + multiLink.rel + "</p>" +
"<p>Split values: " + multiLink.rel.split(' ').join(', ') + "</p>";
}
</script>
</body>
</html>
This shows how multiple relationship values can be combined −
Multiple rel Values Example
[Show Multiple rel Values]
(After clicking:)
Full rel value: preconnect dns-prefetch
Split values: preconnect, dns-prefetch
Browser Compatibility
The Link rel property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. Some newer rel values like dns-prefetch, preconnect, and preload have more limited support in older browsers.
Common Use Cases
The most common uses of the Link rel property include −
Stylesheets −
rel="stylesheet"for linking CSS filesIcons −
rel="icon"for favicon and app iconsPerformance −
rel="preload",rel="prefetch"for resource optimizationNavigation −
rel="next",rel="prev"for document series
Conclusion
The HTML DOM Link rel property is essential for defining relationships between documents and optimizing resource loading. It accepts various relationship values that help browsers understand how to handle linked resources, from stylesheets and icons to performance optimizations like preloading and prefetching.
178 Views
