HTML - rel Attribute

The rel is an HTML attribute that specifies the relationship between the current document and the linked document or resource. Or, in other words, we can say that rel is a short form of relationship that is used to define the relation between the current linked and the source linked.

The rel attribute can be used within the following elements −

  • <a>
  • <area>
  • <link>
  • <form>
this attribute will be used only when the href attribute is present in the syntax.

Syntax

Following is the syntax of the rel attribute −

<link rel="value">

Attribute value

  • alternate − it specifies the alternative link of the document (i.e. print page, translated or mirror).
  • authorit defines author of the link.
  • dns-prefetch − it specifies that the browser should pre-emptively perform DNS resolution for the target resource’s origin.
  • help − it specifies a link to a help document. Example: <link rel="help" href="/help/">
  • icon − it imports an icon in a given document.
  • license − it specifies a link to copyright information for the document.
  • next − it provides the link of next document is series.
  • pingback − it gives the address of the pingback server.
  • prefetch − it specifies that the target should be cached.
  • preconnect − it specifies the target should be preemptively to the origin resource.
  • preload − it specifies that the browser must preemptively fetch and cache.
  • prerender − it specifies that the browser should load.
  • prev − it specifies the previous document in a selection.
  • search − it specifies the search tool for the document.
  • stylesheet − it imports a style sheet.

Example

In the following example, we are using the rel attribute within the <link> element to import the external style sheet.

rel.html

<!DOCTYPE html>
<html>
<head>
   <title>HTML rel Attribute</title>
   <link rel="stylesheet" type="text/css" href="rel.css">
</head>
<body>
   <h3>HTML rel attribute</h3>
   <h1>tutorials <span>point</span>
   </h1>
   <p>easy to learn!</p>
</body>
</html>

rel.css

This is external CSS file −

h3{
   background-color: yellow;
   font-style: italic;
}
h1{
   color:green;
}
span{
   color:black;
}
p{
   color:green;
}

When we run the above code, it will generate an output consisting of the text applied with CSS displayed on the webpage.

Example

Considering the another scenario, where we are going to use the area element.

<!DOCTYPE html>
<html>
<body>
   <h1 style="color: green;"> tutorials <span style="color: black">point</span>
   </h1>
   <h1>The area rel attribute</h1>
   <p>Click on the earch to watch it closer:</p>
   <img src="https://www.nasa.gov/sites/default/files/thumbnails/image/apollo_17_blue_marble_photo_dec_7_1972_as17-148-22727.jpg" width="150" height="130" alt="earth" usemap="#earthmap">
   <map name="earthmap">
      <area shape="rect" coords="0,0,60,100" alt="earth" href="https://media.istockphoto.com/id/1284041267/photo/planet-earth-viewed-from-space-with-city-lights-in-europe-world-with-sunrise-conceptual-image.jpg?s=612x612&w=0&k=20&c=_5ebpM-xDFAlAj2uRBby6RfX3KthmOj6gSIdPcFw8mc=" rel="alternate">
   </map>
</body>
</html>

On running the above code, the output window will pop up displaying the text along with a alt text on the webpage. when the user clicks on the alt text it further display an image.

Example

Let's look into the following example, where we are using the rel attribute with its values stylesheet and icon with the link element.

<!DOCTYPE html>
<html>
<head>
   <title>HTML rel Attribute</title>
   <link rel="stylesheet" type="text/css" href="rel.css">
   <link rel="icon" href="https://www.tutorialspoint.com/images/logo.png?v2" />
</head>
<body>
   <h3>HTML rel attribute</h3>
   <h1>tutorials<span>point</span>
   </h1>
   <p>easy to learn!</p>
</body>
</html>

When we run the above code, it will generate an output consisting of the text apllied with CSS along with the favicon displayed on the webpage.

html_attributes_reference.htm
Advertisements