HTML rel Attribute

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 3 Examples
Links & SEO
HTML rel attribute tutorial — link relationships on link and anchor elements
Overview

Introduction

The rel attribute describes the relationship between the current document and a linked resource. On <link> it declares head resources like stylesheet, icon, and canonical. On <a> it controls link behavior — noopener and noreferrer for security, nofollow for SEO hints, prev and next for pagination. You can combine multiple keywords: rel="noopener noreferrer". Set element.rel or use element.relList in JavaScript.

What You’ll Learn

01

Relationship

Link type.

02

link

Head tags.

03

a

Anchors.

04

noopener

Security.

05

nofollow

SEO hint.

06

relList

JS API.

Fundamentals

Purpose of rel Attribute

Browsers, search engines, and assistive tech use rel to understand what a link means — not just where it points. A stylesheet link tells the browser to apply CSS. A canonical link tells crawlers which URL is authoritative. An anchor with noopener tells the browser to isolate a new tab from window.opener attacks.

Using the correct rel value makes documents more semantic, safer, and easier for search engines to interpret.

💡
Multiple values allowed

Use a space-separated list: rel="noopener noreferrer". Each keyword adds a separate relationship.

Foundation

📝 Syntax

Add rel with one or more relationship keywords:

rel.html
<!-- link in head -->
<link rel="stylesheet" href="/styles/main.css">
<link rel="icon" href="/favicon.ico">

<!-- anchor -->
<a href="https://example.com"
  target="_blank" rel="noopener noreferrer">External</a>

Syntax Rules

  • Value is a space-separated list of link type keywords.
  • On <link>: common values include stylesheet, icon, canonical, preload, alternate.
  • On <a> and <area>: noopener, noreferrer, nofollow, prev, next, external.
  • Always use rel="noopener" (or noreferrer) with target="_blank".
  • JavaScript: anchor.rel = "nofollow" or anchor.relList.add("noopener").
  • Keywords are case-insensitive in HTML but use lowercase by convention.
  • Invalid or unknown values are ignored by browsers — use documented keywords only.
Reference

💎 Values

Common rel keywords by element:

On <link>

  • stylesheet — External CSS file.
  • icon — Favicon or app icon.
  • canonical — Preferred URL for duplicate content.
  • alternate — Alternate representation (RSS, translated page).
  • preload / preconnect / dns-prefetch — Performance hints.

On <a>

  • noopener — New tab cannot access window.opener.
  • noreferrer — No Referer header; implies noopener.
  • nofollow — SEO hint: do not pass ranking credit.
  • sponsored / ugc — Paid or user-generated content links.
  • prev / next — Pagination sequence (separate values).
rel-values.html
<link rel="canonical" href="https://example.com/page">

<a href="/sponsored-post" rel="sponsored nofollow">Ad</a>
Cheat Sheet

⚡ Quick Reference

ValueElementPurpose
stylesheetlinkLoad CSS
iconlinkFavicon
canonicallinkSEO preferred URL
noopeneraBlock tab-nabbing
noreferreraNo Referer + noopener
nofollowaSEO crawl hint
Scope

Applicable Elements

ElementSupported?Common rel values
<link>Yesstylesheet, icon, canonical, preload
<a>Yesnoopener, noreferrer, nofollow, prev, next
<area>YesSame as a (image maps)
<form>Yesnofollow, noreferrer, etc.
<img>NoUse a wrapping image instead
Compare

noopener vs noreferrer vs referrerpolicy

FeatureBlocks openerSuppresses Referer
rel="noopener"YesNo
rel="noreferrer"Yes (implied)Yes
referrerpolicy="no-referrer"NoYes (granular policies)
rel="nofollow"NoNo (SEO only)
Hands-On

Examples Gallery

link rel=stylesheet in the head, dynamic nofollow on an anchor, and secure target="_blank" with noopener noreferrer.

👀 Live Preview

External link opened safely in a new tab:

Open example.com

rel="noopener noreferrer" blocks window.opener access and omits the Referer header.

Example — link rel="stylesheet"

Connect an external CSS file in the document head:

link-stylesheet.html
<head>
  <link rel="stylesheet" href="/styles/main.css">
  <link rel="icon" href="/favicon.ico">
</head>
Try It Yourself

How It Works

The browser reads rel to decide how to handle the linked resource — as CSS, an icon, or another resource type.

Dynamic Values with JavaScript

Add nofollow to a link when it points to user-generated content:

dynamic-rel.html
<a id="dynamicLink" href="https://example.com">User link</a>

<script>
  document.getElementById("dynamicLink").rel = "nofollow";
  // or: link.relList.add("nofollow");
</script>
Try It Yourself

How It Works

Dynamic rel is useful for user-submitted links, comment sections, or CMS content where trust level varies per URL.

Example — target="_blank" with noopener

Always secure external links that open new tabs:

noopener-noreferrer.html
<a href="https://partner.com"
  target="_blank"
  rel="noopener noreferrer">
  Visit partner site
</a>
Try It Yourself

How It Works

noopener severs the opener reference. noreferrer also hides the Referer. Modern browsers imply noopener for target="_blank", but explicit rel is still best practice.

A11y

♿ Accessibility

  • rel does not replace link text — Users still need clear anchor text; rel is for machines and browsers.
  • external links — Consider indicating new-tab links visually and in text when using target="_blank".
  • prev / next — Help all users navigate paginated content; ensure links are keyboard accessible.
  • Stylesheets — rel="stylesheet" enables visual design required for readable, accessible layouts.
  • nofollow is not hidden — Screen readers still announce the link; it only affects crawler behavior.

🧠 How rel Works

1

Parse rel

Read keywords.

Token
2

Apply rule

Per keyword.

Behavior
3

Fetch / navigate

With context.

Action
=

Meaningful link

Safe + semantic.

Compatibility

Browser Support

The rel attribute is supported on link and a in all browsers. Individual keywords vary — noopener and stylesheet are universal in modern browsers.

✅ HTML Links · Fully supported

Universal rel attribute

Core keywords work everywhere; newer values like sponsored are supported in modern crawlers.

99% Browser support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer noopener IE 11+
Full support
Opera Fully supported
Full support
rel attribute 99% supported

Bottom line: Safe for link relationships in all browsers. Always add noopener to target="_blank" links.

Pro Tips

💡 Best Practices

✅ Do

  • Use rel="noopener noreferrer" on every target="_blank" link
  • Set rel="canonical" on duplicate or parameterized URLs
  • Mark paid/UGC links with sponsored or ugc
  • Use rel="stylesheet" for external CSS in head
  • Use relList.add() when combining multiple keywords in JS

❌ Don’t

  • Open target="_blank" without noopener
  • Assume nofollow blocks crawling entirely — it is a hint
  • Use wrong rel on link (e.g. stylesheet on an anchor)
  • Rely on noreferrer alone for fine-grained Referer control — use referrerpolicy
  • Write prev/next as one value — they are separate keywords
Wrap Up

Conclusion

The rel attribute tells browsers and crawlers what a link means — from stylesheets and favicons to secure external navigation and SEO hints.

Master the common keywords on link and a, and always pair new-tab links with noopener.

View Examples Gallery Try rel demo
Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about rel

Bookmark these before adding links.

5
Core concepts
🔗 01

Relationship

Not just href.

Core
🎨 02

stylesheet

On link.

CSS
🔒 03

noopener

Tab safety.

Security
🔎 04

nofollow

SEO hint.

Crawl
📚 05

Multi-value

Space-separated.

Syntax
🎯 Every link has a relationship — say it explicitly with rel
Review Quick Reference →

❓ Frequently Asked Questions

It describes the relationship between the current document and the linked resource — as a stylesheet, icon, secure external link, or SEO-classified hyperlink.
Primarily link (in head) and a (anchors). Also area and form.
It prevents the page opened via target="_blank" from accessing window.opener, blocking tab-nabbing attacks.
Yes: rel="noopener noreferrer". In JavaScript use element.relList.add("noopener").
nofollow is a hint to crawlers not to pass ranking credit. It does not prevent discovery or indexing of the target URL entirely.
Yes. Core values like stylesheet and noopener work in all modern browsers and IE 11+.

Link with meaning

Practice rel on stylesheet links, dynamic nofollow, and secure target="_blank" anchors in the Try It editor.

Try rel demo →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML referrerpolicy Attribute HTML required Attribute