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>.
A rel attribute on an <a> tag.
This link references an external page that is not endorsed by the current site.
Go to <a href="https://github.com/"
rel="external nofollow"
target="_blank">GitHub</a>
For additional details see our HTML anchor rel Reference.
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.
<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).
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> |
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. |
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.
<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.
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.
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.
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 |