The rel Attribute in HTML Links: A Comprehensive Guide

The rel attribute is one of the most important yet often overlooked attributes in HTML link definitions. It defines the relationship between the current document and the linked resource, providing crucial information for browsers, search engines, and security mechanisms.

Understanding the rel Attribute
Security-Related rel Values
SEO and Discovery rel Values
Navigation and Structure rel Values
Resource and Performance rel Values
Social and Sharing rel Values
Less Common but Important rel Values
Best Practices and Guidelines
Browser Support and Compatibility
Real-World Implementation Examples
Common Mistakes and How to Avoid Them
Bibliography and References

Understanding the rel Attribute

What is the rel Attribute?

The rel attribute specifies the relationship between the current document and the linked document or resource. It’s a space-separated list of link types that can be used on <a>, <area>, <form>, and <link> elements.

Basic Syntax:

<a href="https://example.com" rel="relationship-type">Link text</a> <link href="styles.css" rel="stylesheet" />

Why the rel Attribute Matters

Security: Prevents security vulnerabilities like reverse tabnabbing
SEO: Helps search engines understand page relationships
Performance: Enables browser optimizations through preloading
Accessibility: Provides semantic meaning for assistive technologies
User Experience: Helps browsers provide better navigation features

noopener

Purpose: Prevents the new page from accessing the window.opener property and protects against reverse tabnabbing attacks.

Usage:

<!-- Security risk - DON'T do this -->
<a href="https://external-site.com" target="_blank">Unsafe Link</a>

<!-- Secure - DO this -->
<a href="https://external-site.com" target="_blank" rel="noopener">Secure Link</a>

<!-- Even better - combined with noreferrer -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer"> Most Secure Link </a>

Security Example:

<!-- Vulnerable code that an attacker could exploit -->
<a href="https://malicious-site.com" target="_blank">Click here</a>

<!-- Malicious site could run: -->
<script>
  if (window.opener) {
    window.opener.location = "https://phishing-site.com";
  }
</script>

<!-- Protected code -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer"> Safe External Link </a>

noreferrer

Purpose: Prevents the browser from sending the HTTP referer header to the linked page.

Usage:

<!-- Hide referrer information -->
<a href="https://analytics-tracker.com" rel="noreferrer"> Anonymous Link </a>

<!-- Combine with noopener for maximum security -->
<a href="https://third-party.com" target="_blank" rel="noopener noreferrer"> Secure and Anonymous </a>

Privacy Example:

<!-- Without noreferrer - referrer is sent -->
<a href="https://competitor.com">Visit Competitor</a>
<!-- HTTP Header: Referer: https://yoursite.com/page -->

<!-- With noreferrer - no referrer sent -->
<a href="https://competitor.com" rel="noreferrer">Visit Competitor</a>
<!-- HTTP Header: (no referer header) -->

nofollow

Purpose: Tells search engines not to follow the link for ranking purposes.

Usage:

<!-- Don't pass SEO value to external sites -->
<a href="https://untrusted-site.com" rel="nofollow"> Untrusted Link </a>

<!-- User-generated content -->
<a href="https://user-submitted-link.com" rel="nofollow ugc"> User Submitted Link </a>

<!-- Sponsored content -->
<a href="https://advertiser.com" rel="nofollow sponsored"> Advertisement </a>

SEO and Discovery rel Values

canonical

Purpose: Indicates the preferred URL for a page to prevent duplicate content issues.

Usage:

<!-- In the <head> section -->
<link rel="canonical" href="https://example.com/preferred-url" />

<!-- Example: Product page with multiple URLs -->
<link rel="canonical" href="https://store.com/products/widget" />
<!-- Even if accessed via: -->
<!-- https://store.com/products/widget?color=red&size=large -->
<!-- https://store.com/products/widget?utm_source=email -->

alternate

Purpose: Provides alternative versions of the current document.

Usage:

<!-- Language alternatives -->
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

<!-- RSS/Atom feeds -->
<link rel="alternate" type="application/rss+xml" title="Blog RSS" href="/feed.xml" />
<link rel="alternate" type="application/atom+xml" title="News Feed" href="/atom.xml" />

<!-- Mobile version -->
<link rel="alternate" media="handheld" href="https://m.example.com/" />

<!-- Print version -->
<link rel="alternate" media="print" href="https://example.com/print-version" />

next and prev

Purpose: Indicates the next and previous pages in a series.

Usage:

<!-- Pagination -->
<link rel="prev" href="/blog/page/1" />
<link rel="next" href="/blog/page/3" />

<!-- In navigation -->
<a href="/chapter-1" rel="prev">← Previous Chapter</a>
<a href="/chapter-3" rel="next">Next Chapter →</a>

<!-- Article series -->
<nav aria-label="Article navigation">
  <a href="/series/part-1" rel="prev">Part 1: Introduction</a>
  <a href="/series/part-3" rel="next">Part 3: Advanced Topics</a>
</nav>

home

Purpose: Links to the homepage of the site.

Usage:

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
  <a href="/" rel="home">Home</a> > <a href="/products/">Products</a> >
  <span aria-current="page">Widget</span>
</nav>

<!-- Site logo linking to home -->
<a href="/" rel="home" aria-label="Return to homepage">
  <img src="/logo.png" alt="Company Logo" />
</a>

up

Purpose: Links to the parent page in a hierarchical structure.

Usage:

<!-- Hierarchical navigation -->
<a href="/documentation/" rel="up">← Back to Documentation</a>

<!-- File system style navigation -->
<nav aria-label="Parent directory">
  <a href="/docs/guides/" rel="up">↑ Guides Directory</a>
</nav>

bookmark

Purpose: Provides a permalink to the current article or section.

Usage:

<!-- Article permalink -->
<article>
  <h1>
    <a href="/articles/web-security-guide" rel="bookmark"> Web Security Best Practices </a>
  </h1>
  <p>Article content...</p>
</article>

<!-- Section bookmarks -->
<h2 id="security-headers">
  <a href="#security-headers" rel="bookmark">Security Headers</a>
</h2>

Resource and Performance rel Values

preload

Purpose: Instructs the browser to start loading a resource immediately.

Usage:

<!-- Critical CSS -->
<link rel="preload" href="/critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />

<!-- Web fonts -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

<!-- Hero image -->
<link rel="preload" href="/hero-image.jpg" as="image" />

<!-- JavaScript modules -->
<link rel="preload" href="/app.js" as="script" />

<!-- Video content -->
<link rel="preload" href="/intro-video.mp4" as="video" type="video/mp4" />

prefetch

Purpose: Suggests that the browser should fetch a resource in advance for future navigation.

Usage:

<!-- Next page in a sequence -->
<link rel="prefetch" href="/page-2.html" />

<!-- Likely next resources -->
<link rel="prefetch" href="/product-details.css" />
<link rel="prefetch" href="/checkout.js" />

<!-- User might visit -->
<link rel="prefetch" href="/popular-article.html" />

preconnect

Purpose: Establishes early connections to important third-party origins.

Usage:

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- CDN resources -->
<link rel="preconnect" href="https://cdn.example.com" />

<!-- Analytics -->
<link rel="preconnect" href="https://www.google-analytics.com" />

<!-- Social media -->
<link rel="preconnect" href="https://api.twitter.com" />

dns-prefetch

Purpose: Performs DNS resolution for external domains in advance.

Usage:

<!-- Third-party scripts -->
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
<link rel="dns-prefetch" href="//cdn.jsdelivr.net" />

<!-- External APIs -->
<link rel="dns-prefetch" href="//api.example.com" />

<!-- Social media widgets -->
<link rel="dns-prefetch" href="//platform.twitter.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />

modulepreload

Purpose: Preloads JavaScript modules and their dependencies.

Usage:

<!-- ES6 modules -->
<link rel="modulepreload" href="/modules/app.js" />
<link rel="modulepreload" href="/modules/utils.js" />

<!-- With integrity checking -->
<link rel="modulepreload" href="/modules/secure.js" integrity="sha384-abc123..." />

<!-- Cross-origin modules -->
<link rel="modulepreload" href="https://cdn.example.com/module.js" crossorigin />

stylesheet

Purpose: Links to an external CSS stylesheet.

Usage:

<!-- Standard CSS -->
<link rel="stylesheet" href="/styles.css" />

<!-- Media-specific stylesheets -->
<link rel="stylesheet" href="/print.css" media="print" />
<link rel="stylesheet" href="/mobile.css" media="screen and (max-width: 768px)" />

<!-- Conditional loading -->
<link rel="stylesheet" href="/dark-theme.css" media="(prefers-color-scheme: dark)" />

<!-- Alternative stylesheets -->
<link rel="alternate stylesheet" href="/high-contrast.css" title="High Contrast" />

author

Purpose: Links to information about the author of the document.

Usage:

<!-- Author profile -->
<a href="/author/john-doe" rel="author">John Doe</a>

<!-- Multiple authors -->
<div class="authors">
  <a href="/author/jane-smith" rel="author">Jane Smith</a>,
  <a href="/author/bob-wilson" rel="author">Bob Wilson</a>
</div>

<!-- External author profile -->
<a href="https://twitter.com/johndoe" rel="author external"> @johndoe on Twitter </a>

license

Purpose: Indicates the license under which the content is distributed.

Usage:

<!-- Creative Commons -->
<a href="https://creativecommons.org/licenses/by/4.0/" rel="license"> CC BY 4.0 </a>

<!-- Custom license -->
<a href="/license.html" rel="license">View License Terms</a>

<!-- In footer -->
<footer>
  <p>
    This work is licensed under a
    <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license">
      Creative Commons Attribution-ShareAlike 4.0 International License </a
    >.
  </p>
</footer>

me

Purpose: Indicates that the linked resource represents the same person/entity as the current page.

Usage:

<!-- Social media profiles -->
<a href="https://twitter.com/username" rel="me">Twitter</a>
<a href="https://github.com/username" rel="me">GitHub</a>
<a href="https://linkedin.com/in/username" rel="me">LinkedIn</a>

<!-- Personal website -->
<a href="https://personal-blog.com" rel="me">My Blog</a>

<!-- Identity verification -->
<div class="social-links">
  <a href="https://mastodon.social/@username" rel="me">Mastodon</a>
  <a href="https://keybase.io/username" rel="me">Keybase</a>
</div>

Less Common but Important rel Values

help

Purpose: Links to context-sensitive help.

Usage:

<!-- Form help -->
<label for="password">
  Password
  <a href="/help/password-requirements" rel="help">?</a>
</label>

<!-- Feature documentation -->
<button type="button">
  Advanced Settings
  <a href="/docs/advanced-settings" rel="help" aria-label="Help for advanced settings">📖</a>
</button>

search

Purpose: Links to a search page or search functionality.

Usage:

<!-- Search page -->
<a href="/search" rel="search">Search Site</a>

<!-- OpenSearch description -->
<link rel="search" type="application/opensearchdescription+xml" title="Site Search" href="/opensearch.xml" />

tag

Purpose: Indicates that the linked resource is a tag or category for the current page.

Usage:

<!-- Article tags -->
<div class="tags">
  <a href="/tags/javascript" rel="tag">JavaScript</a>
  <a href="/tags/web-development" rel="tag">Web Development</a>
  <a href="/tags/security" rel="tag">Security</a>
</div>

<!-- Blog post categories -->
<nav aria-label="Post categories">
  <a href="/category/tutorials" rel="tag">Tutorials</a>
  <a href="/category/reviews" rel="tag">Reviews</a>
</nav>

external

Purpose: Indicates that the link leads to an external resource.

Usage:

<!-- External links -->
<a href="https://external-site.com" rel="external"> Visit External Site </a>

<!-- Combined with security attributes -->
<a href="https://third-party.com" rel="external noopener noreferrer" target="_blank"> Safe External Link </a>

<!-- With visual indicator -->
<a href="https://example.org" rel="external"> External Resource ↗ </a>

ugc (User Generated Content)

Purpose: Indicates that the link was created by user-generated content.

Usage:

<!-- Comment links -->
<div class="comment">
  <p>
    Check out this resource:
    <a href="https://user-link.com" rel="ugc nofollow">User Shared Link</a>
  </p>
</div>

<!-- Forum posts -->
<div class="forum-post">
  <a href="https://user-submitted.com" rel="ugc nofollow external"> User Recommendation </a>
</div>

Purpose: Indicates that the link is part of an advertisement or sponsored content.

Usage:

<!-- Sponsored links -->
<div class="advertisement">
  <a href="https://sponsor.com" rel="sponsored nofollow" target="_blank"> Sponsored: Great Product! </a>
</div>

<!-- Affiliate links -->
<p>
  I recommend this
  <a href="https://affiliate.com/product" rel="sponsored nofollow"> amazing product </a>
  (affiliate link).
</p>

Best Practices and Guidelines

Security Best Practices

<!-- Always use with target="_blank" -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer"> External Link </a>

<!-- For user-generated content -->
<a href="https://user-link.com" rel="ugc nofollow noopener" target="_blank"> User Link </a>

<!-- For sponsored content -->
<a href="https://advertiser.com" rel="sponsored nofollow noopener" target="_blank"> Ad Link </a>

Performance Optimization

<!-- Critical resources -->
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/hero.jpg" as="image" />

<!-- Likely next page -->
<link rel="prefetch" href="/next-page.html" />

<!-- Third-party connections -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="//analytics.com" />

SEO Optimization

<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/canonical-url" />

<!-- Language alternatives -->
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />

<!-- RSS feeds -->
<link rel="alternate" type="application/rss+xml" href="/feed.xml" />

Browser Support and Compatibility

Well-Supported Values

stylesheet, alternate, next, prev - Universal support
nofollow - Supported by all major search engines
canonical - Supported by Google, Bing, Yahoo

Modern Browser Features

noopener, noreferrer - Supported in all modern browsers
preload, prefetch - Supported in Chrome, Firefox, Safari
modulepreload - Supported in Chrome, Firefox, Safari (newer versions)

Progressive Enhancement

<!-- Fallback for older browsers -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/styles.css" /></noscript>

Real-World Implementation Examples

Complete Blog Post Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Web Security Guide</title>

    <!-- SEO and Discovery -->
    <link rel="canonical" href="https://blog.example.com/web-security-guide" />
    <link rel="alternate" type="application/rss+xml" href="/feed.xml" />

    <!-- Performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preload" href="/critical.css" as="style" />
    <link rel="stylesheet" href="/main.css" />

    <!-- Navigation -->
    <link rel="prev" href="/previous-post" />
    <link rel="next" href="/next-post" />
  </head>
  <body>
    <nav>
      <a href="/" rel="home">Home</a>
      <a href="/blog/" rel="up">Blog</a>
    </nav>

    <article>
      <header>
        <h1>
          <a href="/web-security-guide" rel="bookmark"> Web Security Best Practices </a>
        </h1>
        <p>By <a href="/author/jane-doe" rel="author">Jane Doe</a></p>
      </header>

      <main>
        <p>Content about web security...</p>

        <p>
          For more information, see the
          <a href="https://owasp.org" rel="external noopener noreferrer" target="_blank"> OWASP documentation ↗ </a>
        </p>
      </main>

      <footer>
        <div class="tags">
          <a href="/tags/security" rel="tag">Security</a>
          <a href="/tags/web-development" rel="tag">Web Development</a>
        </div>

        <p>
          Licensed under
          <a href="https://creativecommons.org/licenses/by/4.0/" rel="license"> CC BY 4.0 </a>
        </p>
      </footer>
    </article>

    <nav aria-label="Post navigation">
      <a href="/previous-post" rel="prev">← Previous: CSS Security</a>
      <a href="/next-post" rel="next">JavaScript Security →</a>
    </nav>
  </body>
</html>

E-commerce Product Page Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Widget Pro - Online Store</title>

    <!-- Performance optimizations -->
    <link rel="preconnect" href="https://cdn.shopify.com" />
    <link rel="preload" href="/product-images/widget-pro.jpg" as="image" />
    <link rel="prefetch" href="/checkout" />

    <!-- SEO -->
    <link rel="canonical" href="https://store.com/products/widget-pro" />
    <link rel="alternate" hreflang="en" href="https://store.com/en/products/widget-pro" />
    <link rel="alternate" hreflang="es" href="https://store.com/es/productos/widget-pro" />
  </head>
  <body>
    <nav aria-label="Breadcrumb">
      <a href="/" rel="home">Home</a> > <a href="/products" rel="up">Products</a> >
      <span aria-current="page">Widget Pro</span>
    </nav>

    <main>
      <h1>Widget Pro</h1>

      <div class="product-reviews">
        <h2>Customer Reviews</h2>
        <blockquote>
          "Great product! See my full review at
          <a href="https://review-site.com/widget-pro" rel="ugc nofollow external" target="_blank">
            ReviewSite.com ↗ </a
          >" - Customer Name
        </blockquote>
      </div>

      <aside class="related-products">
        <h2>You might also like</h2>
        <a href="/products/widget-basic" rel="prefetch">Widget Basic</a>
        <a href="/products/widget-deluxe" rel="prefetch">Widget Deluxe</a>
      </aside>
    </main>
  </body>
</html>

Common Mistakes and How to Avoid Them

Security Mistakes

❌ Wrong:

<!-- Vulnerable to reverse tabnabbing -->
<a href="https://external-site.com" target="_blank">External Link</a>

✅ Correct:

<!-- Secure external link -->
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer"> External Link </a>

SEO Mistakes

❌ Wrong:

<!-- Missing nofollow on paid links -->
<a href="https://advertiser.com">Sponsored Content</a>

✅ Correct:

<!-- Properly marked sponsored content -->
<a href="https://advertiser.com" rel="sponsored nofollow"> Sponsored Content </a>

Performance Mistakes

❌ Wrong:

<!-- Too many preload hints -->
<link rel="preload" href="/style1.css" as="style" />
<link rel="preload" href="/style2.css" as="style" />
<link rel="preload" href="/style3.css" as="style" />
<link rel="preload" href="/image1.jpg" as="image" />
<link rel="preload" href="/image2.jpg" as="image" />

✅ Correct:

<!-- Only critical resources -->
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/hero-image.jpg" as="image" />
<link rel="prefetch" href="/next-page.html" />

Accessibility Mistakes

❌ Wrong:

<!-- Unclear link purpose -->
<a href="/help" rel="help">?</a>

✅ Correct:

<!-- Clear link purpose -->
<a href="/help/password-requirements" rel="help" aria-label="Password requirements help"> ? </a>

Bibliography and References

Primary Sources

W3Schools HTML rel Attribute Reference
- W3Schools <a> rel Attribute
- Comprehensive reference for rel attribute values and usage examples
W3C HTML Specification
- HTML Living Standard - Link Types
- Official specification for HTML link relationships
Mozilla Developer Network (MDN)
- HTML <a> Element
- HTML <link> Element

Security References

OWASP Security Guidelines
- Reverse Tabnabbing
- Web Security Testing Guide
Google Security Documentation
- Site Security Best Practices

SEO and Performance References

Google Search Central
- Link Attributes for SEO
- Resource Hints
Web Performance Standards
- Resource Hints Specification
- Preload Specification

Accessibility Resources

Web Content Accessibility Guidelines (WCAG)
- WCAG 2.1 Guidelines
- Link Purpose Guidelines

Browser Compatibility

Can I Use
- rel=noopener Support
- rel=preload Support
Browser Documentation
- Chrome Web Updates
- Firefox Developer Documentation

IndieWeb Standards
- rel=me Specification
- Microformats Documentation

Licensing and Legal

Creative Commons
- CC License Types
- License Implementation

Citation Format

This document follows the Chicago Manual of Style for web resources. All URLs were verified as accessible on July 31, 2025. The examples and best practices presented are based on current web standards and may evolve as specifications are updated.

Special Acknowledgment: This guide extensively references the W3Schools HTML rel attribute documentation, which provides clear and practical examples for web developers learning HTML fundamentals.

This guide is part of the MIJUG.NET documentation series. For updates and additional resources, visit MIJUG.NET.

Table of Contents

Understanding the rel Attribute

What is the rel Attribute?

Why the rel Attribute Matters

Security-Related rel Values

noopener

noreferrer

nofollow

SEO and Discovery rel Values

canonical

alternate

next and prev

Navigation and Structure rel Values

home

up

bookmark

Resource and Performance rel Values

preload

prefetch

preconnect

dns-prefetch

modulepreload

stylesheet

Social and Sharing rel Values

author

license

me

Less Common but Important rel Values

help

search

tag

external

ugc (User Generated Content)

sponsored

Best Practices and Guidelines

Security Best Practices

Performance Optimization

SEO Optimization

Browser Support and Compatibility

Well-Supported Values

Modern Browser Features

Progressive Enhancement

Real-World Implementation Examples

Complete Blog Post Example

E-commerce Product Page Example

Common Mistakes and How to Avoid Them

Security Mistakes

SEO Mistakes

Performance Mistakes

Accessibility Mistakes

Bibliography and References

Primary Sources

Security References

SEO and Performance References

Accessibility Resources

Browser Compatibility

Social Media and Identity

Licensing and Legal

Citation Format