The HTML DOM Link rel property sets/returns the relationship between the current and the linked document and is required to mention.
Syntax
Following is the syntax −
- Returning rel attribute value
linkObject.rel
- Setting rel to a valueString
linkObject.rel = valueString
Value Strings
Here, “valueString” can be the following −
| valueString | Description |
|---|---|
| alternate | It provides |
| author | It provides a link to the author of the linked document |
| dnsprefetch | It specifies that the browser should pre-emptively perform DNS resolution for the target resource's origin |
| help | It provides a link to a help document if any |
| icon | It imports an icon to represent the document |
| rel | It sets/returns the relationship between the current and the linked document |
| license | It provides copyright information for the linked document |
| next | It provides a link to the next document in the series of documents |
| pingback | It provides the address of the pingback server that handles pingbacks to the current linked document |
| preconnect | It specifies that the browser should pre-emptively connect to the target resource's origin if any |
| prefetch | It specifies that the browser should pre-emptively fetch and cache the target resource as it is required to follow-up navigation of document |
| preload | It specifies that the browser agent must pre-emptively fetch and cache the target resource for current navigation according to the destination given by the "as" attribute (and the priority associated with that destination). |
| prerender | It specifies that the browser should load the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load |
| prev | It indicates that the document is a part of a series, and that the previous document in the series is the referenced linked document |
| search | It provides a link to a resource that can be used to search through the current document and its related pages. |
| stylesheet | It imports a style sheet in the current document |
Example
Let us see an example for Link rel property −
<!DOCTYPE html>
<html>
<head>
<title>Link rel</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-rel</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
if(extStyle.rel === 'stylesheet')
divDisplay.textContent = 'The linked document is of type stylesheet';
else
divDisplay.textContent = 'The linked document is of type '+extStyle.rel;
</script>
</body>
</html>In the above example ‘style.css’ contains −
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}Output
This will produce the following output −
