HTMLWeb DevelopmentFront End Technology

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 −

valueStringDescription
alternateIt provides
dnsprefetchIt specifies that the browser should pre-emptively perform DNS resolution for the target resource's origin
helpIt provides a link to a help document if any
iconIt imports an icon to represent the document
relIt sets/returns the relationship between the current and the linked document
nextIt provides a link to the next document in the series of documents
pingbackIt provides the address of the pingback server that handles pingbacks to the current linked document
preconnectIt specifies that the browser should pre-emptively connect to the target resource's origin if any
prefetchIt specifies that the browser should pre-emptively fetch and cache the target resource as it is required to follow-up navigation of document
preloadIt 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).
prerenderIt 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
prevIt indicates that the document is a part of a series, and that the previous document in the series is the referenced linked document
searchIt provides a link to a resource that can be used to search through the current document and its related pages.
stylesheetIt imports a style sheet in the current document

Example

Let us see an example for Link rel property −

Live Demo

<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<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;
}
* {
}