HTML - rel Attribute

HTML rel attribute specifies the relationship between the current document and the linked document or resource.

This attribute will be used only when the href attribute is present in the syntax.

Syntax

<link rel="value">

Attribute value

alternate: It specifies the alternative link of the document (i.e. print page, translated or mirror).
author: It 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.

Applies on

Below-listed elements allow the use of the HTML rel attribute.

Element	Description
<a>	HTML <a> tag defines a hyperlink. It is used to link from one page to another.
<area>	HTML <area> tag specifies the areas of the image, mapping that can be clicked on or are active areas that are linked to by hyperlinks.
<link>	HTML <link> tag specifies relationship between the current document and an external resource.
<form>	HTML <form> tag is used to collect user input on a website throuugh a form.

Examples of HTML rel attribute

Below examples will illustrate the HTML rel attribute, where and how we should use this attribute!

Import external style sheet using rel attribute in link tag

The below rel.html displays the text with the css applied through rel.css

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;
}

Using rel attribute in 'area' tag

The below code displays an image map. Upon clicking it, another image gets displayed.

<!DOCTYPE html>
<html>

<head>
   <title>HTML area rel attribute</title>
</head>

<body>
   <h1>HTML area rel attribute</h1>
   <p>Click on the below image to see another image!</p>
   <img src=
"/html/images/test.png"        
        height="130" 
        alt="earth" 
        usemap="#earthmap">
   <map name="earthmap">
      <area shape="rect" 
            coords="0,0,60,100" 
            alt="earth" 
            href=
"/images/html.gif" 
            rel="alternate">
   </map>
</body>

</html>

Using rel attribute as icon in 'a' tag

The output window displays a hyperlink which upon clicking displays tutorialspoint logo.

<!DOCTYPE html>
<html>

<head>
   <title>HTML rel Attribute in a tag</title>
</head>

<body>
   <h3>HTML rel attribute in "a" tag</h3>
   <a rel="icon" 
      href="/images/logo.png?v2">
         tutorialspoint logo
   </a>
</body>

</html>

Stop browser from sending HTTP referrer header on form submission

Output window displays a form and upon submission, browser won't send http referrer header.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Form rel Attribute</title>
</head>

<body>
   <h1>HTML Form rel Attribute</h1>
   <form rel="noreferrer" 
         action="/action_page.php">
      <input type="text" 
             name="firstname" 
             placeholder="Enter First Name"><br><br>
      <input type="text" 
             name="lastname" 
             placeholder="Enter Last Name"><br><br>
      <input type="submit" 
             value="SUBMIT" 
             class="btn">
   </form>
</body>

</html>

Supported Browsers

Attribute
rel	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page