HtmlConceptBeginner · 3 min read

What is rel Attribute in HTML and How to Use It

The rel attribute in HTML specifies the relationship between the current document and the linked resource. It is commonly used in <a> and <link> tags to describe how the linked page or file relates to the current page.

⚙️

How It Works

The rel attribute acts like a label that tells the browser or search engines what kind of connection exists between the current page and the link target. Imagine you have a friend who introduces you to someone else and explains how you know them. The rel attribute is like that explanation.

For example, if you link to a stylesheet file, you use rel="stylesheet" to say "this link is a style file for this page." If you link to another webpage, you might use rel="nofollow" to tell search engines not to follow that link. This helps browsers and tools understand the purpose of the link better.

💻

Example

This example shows how to use the rel attribute in a link to a stylesheet and in a hyperlink:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>rel Attribute Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a href="https://example.com" rel="nofollow">Visit Example</a>
</body>
</html>

Output

A simple webpage with styled content (if styles.css exists) and a link labeled 'Visit Example'. The link has a rel attribute telling search engines not to follow it.

🎯

When to Use

Use the rel attribute whenever you link to another resource and want to clarify the relationship. Common uses include:

Stylesheets: rel="stylesheet" to link CSS files.
Navigation: rel="next" or rel="prev" to indicate page order.
SEO: rel="nofollow" to prevent search engines from following a link.
Icons: rel="icon" to link a favicon.

It helps browsers, search engines, and assistive technologies understand your links better, improving user experience and site performance.

✅

Key Points

The rel attribute defines the relationship between the current page and the linked resource.
It is used in <a>, <link>, and other tags that create links.
Common values include stylesheet, nofollow, icon, next, and prev.
Using rel improves SEO, accessibility, and browser behavior.

✅

Key Takeaways

The rel attribute tells browsers the relationship between the current page and the linked resource.

Use rel to improve SEO, accessibility, and how browsers handle links.

Common rel values include 'stylesheet', 'nofollow', 'icon', 'next', and 'prev'.

Always include rel when linking stylesheets or important resources.

Using rel helps search engines and tools understand your website better.