Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML rel Attribute

The rel attribute on an element defines the relationship between the current page and the linked page or resource.

Possible values include: nofollow, noopener, noreferrer and others.

Elements that accept this attribute include <a>, <area>, <link>, and <form>.

Example

#

A rel attribute on an <a> tag.
This link references an external page that is not endorsed by the current site.

Go to GitHub
Go to <a href="https://github.com/" 
         rel="external nofollow"
         target="_blank">GitHub</a>

For additional details see our HTML anchor rel Reference.


Using rel

The rel attribute defines the relationship between the current page and the linked page or resource.

Multiple relationships can be defined by space-separating the values.

On <a>, <area>, and <link> elements the rel attribute requires that href has a value.


Syntax

<tagname rel="nofollow | noopener | noreferrer | stylesheet | 
              icon | canonical | dns-prefetch | external | 
              author | help | license | prev | next | bookmark | 
              search | alternate | tag" />

Note: Not all values apply to all elements (see details below).

Values

#

Value Description Elements
nofollow Specifies the link is not endorsed or is not controlled by the current page's author. Note: search engines often ignore links with nofollow.
<a>, <area>, <form>
noopener No context or information about the current page is sent to the linked page. Used for untrusted links to avoid tampering with the current page.
<a>, <area>, <form>
noreferrer Prevents the browser from sending referrer data about the current page. <a>, <area>, <form>
stylesheet Specifies that the link is a stylesheet to be added to the page.
<link>
icon Specifies that the link is an icon (favicon or otherwise) that represents the page.
<link>
canonical Specifies the preferred URL for the current page.
<link>
dns-prefetch Specifies to perform pre-emptive DNS resolution for the linked resource.
<link>
external Indicates the link is to a page outside the current site (different domain).
<a>, <area>, <form>
author Specifies the link it to a page about the current page's author.
<a>, <area>, <link>
help Specifies the link is to a context-sensitive help page.
<a>, <area>, <link>, <form>
license Specifies the link is to a page with licensing information.
<a>, <area>, <link>, <form>
prev Specifies the previous page in a series of pages.
<a>, <area>, <link>, <form>
next Specifies the next page in a series of pages.
<a>, <area>, <link>, <form>
bookmark Indicates the link is a permalink that can be used for bookmarking.
<a>, <area>
search Specifies the link is to a search page for the current page.
<a>, <area>, <link>, <form>
alternate Specifies the link is to an alternative version of the page. For example, a different device type, or other language version.
<a>, <area>, <link>
tag Specifies a tag keyword for the current page, i.e. a word that identifies the current page.
<a>, <area>

Elements that accept rel

The following elements accept the rel attribute.

Elements Description
<a> Specifies an anchor link -- see example above
<area> Creates clickable areas inside an image map.
<link> Adds an external source to the current page.
<form> Specifies an HTML form.

<area> with rel

An <area> tag with a rel attribute.
The monitor area (in the image) is linked to a page that is not endorsed by the current site.

Computer monitor
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">

<map name="computermap">
  <area rel="external nofollow"
        href="https://www.google.com/search?q=monitor" 
        shape="rect"
        coords="253,142,16,2"
        alt="monitor"
        target="_blank">
</map>

For additional details see our HTML area rel Reference.


<link> with rel

A <link> tag with a rel attribute.
The link is to a stylesheet that is used to style the paragraph.

Styled with CSS from the stylesheet.

<link rel="stylesheet" href="/tutorial/style.css">

<p class="aliceblue">Styled with CSS from the stylesheet.</p>

For additional details see our HTML link rel Reference.


<form> with rel

A <form> tag with a rel attribute.
The form data is submitted to an external url without referrer information.



<form action="https://google.com" rel="external noreferrer" target="_blank">
  <input type="text" name="q" placeholder="Search criteria..."><br/><br/>

  <button type="submit">Submit</button>
</form>

For additional details see our HTML form rel Reference.


Browser support

Here is when rel support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like




Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides