References

Beginner-friendly references for web development, with live, editable examples.

The HTML rel attribute

Attribute All modern browsers Updated
Quick answer

The HTML rel attribute defines the relationship between the current document and the linked resource. It is used on the <a>, <area>, <link> and <form> elements.

Overview

The rel (relationship) attribute describes how a linked resource relates to the current document. On a <link> it is essential — rel="stylesheet" loads CSS, rel="icon" sets the favicon, and rel="canonical" declares the page's preferred URL for SEO. On an <a> or <area> it adds link relationships and hints.

On links, the security and privacy values matter: rel="noopener" stops a newly opened page from reaching back through window.opener, rel="noreferrer" withholds the referrer, and rel="nofollow", "ugc" and "sponsored" tell search engines how to treat the link (user-generated content, paid placements).

On <link>, performance hints (preload, preconnect, dns-prefetch) and rel="canonical" are key for speed and SEO. The attribute takes a space-separated list, so you can combine values such as rel="noopener noreferrer".

Syntax

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

Values

Value
A space-separated list of link types, e.g. nofollow, noopener, noreferrer, stylesheet, preload, canonical, icon, sponsored, ugc.

Best practices

  • On a <link>, use the right rel — stylesheet, icon, canonical or a performance hint.
  • On external links opened with target="_blank", add rel="noopener noreferrer".
  • Use rel="nofollow", "sponsored" or "ugc" to tell search engines how to treat a link.
  • Combine multiple values space-separated, e.g. rel="noopener noreferrer".

Frequently asked questions

What does the rel attribute do?
It describes the relationship between the current document and a linked resource — a stylesheet, icon, canonical URL, or a security/SEO hint.
What is rel="noopener"?
It stops a page opened in a new tab from accessing your page through window.opener, closing a security and performance hole.
What is rel="nofollow"?
It tells search engines not to pass ranking credit through the link — useful for untrusted or paid links.
Can rel have more than one value?
Yes. It is a space-separated list, e.g. rel="noopener noreferrer".
referrerpolicy required