Definition and Usage of the rel Attribute
The HTML rel attribute is used to specify the relationship between the current document and the linked resource.
The term “rel” stands for “relationship,” and this attribute is used to describe how the linked content relates to the page it appears on. The rel attribute is commonly used in the <a>, <area>, and <link> elements. While the rel attribute does not directly benefit users, it provides browsers and search engines with information about link relationships, allowing them to respond more accurately to user requests.
Overview
The hypertext system of the World Wide Web (WWW, W3), created in 1989 by Tim Berners-Lee, is commonly referred to simply as the "Web." Today, it holds an essential position far beyond just being a popular part of our daily lives.
The hypertext system introduced a new era of information access by enabling immediate navigation between web documents. The rel attribute was designed to clarify and improve the understanding of the relationships between linked web documents within this hypertext system.
Background
The rel attribute was first introduced in 1999 to help browsers properly handle linked resources. In the 2000s, search engines began using the rel attribute to better understand linked resources and incorporate this information into search results.
Importance for Both Web Developers and Search Engine Operators
The rel attribute is important to both web developers and search engine operators. Web developers use the rel attribute to clearly express the relationship between linked resources and the current document, enabling browsers and search engines to process and interpret links more efficiently. Search engine operators rely on the rel attribute to better understand linked resources and reflect them in search results. Proper use of the rel attribute also helps improve a website's SEO (Search Engine Optimization). By appropriately applying the rel attribute, search engines can better understand a website’s content and rank it higher in search results.
Purpose of Use
In summary, the rel attribute was introduced to handle the growing complexity of link relationships. Its primary purpose is to clearly express the nature of those relationships and to provide web tools with meaningful metadata about the connection between documents.
By using the rel attribute, developers can clearly define how a linked resource relates to the current document. This allows browsers, search engines, and other web tools to better interpret links and understand the structure and meaning of a web page. As such, the rel attribute plays a key role in clarifying link relationships and enhancing both semantic accuracy and search engine optimization.
Role and Importance of the rel Attribute
The HTML rel attribute defines the relationship between the linked resource and the current document. The term "rel" is short for "relationship" and is used to explicitly describe how the two are connected.
The rel attribute plays a key role in clarifying the structure and meaning of a document by describing the nature of linked resources. This allows browsers, search engines, and other web tools to handle links appropriately and better understand the content of the page. The rel attribute can take on various values and is most commonly used in the <a> element, but it also applies to the <area> and <link> elements.
The importance of the rel attribute can be summarized as follows:
- Search Engine Optimization (SEO): By specifying link relationships using the
relattribute, search engines can better analyze the document and recognize relevant resources, resulting in more accurate search results. - Improved User Experience: Defining the relationship between the current document and linked content allows browsers to handle links more effectively, providing users with a smoother browsing experience.
- Enhanced Accessibility: Using the
relattribute to indicate alternate versions of a document can improve accessibility, enabling assistive technologies to guide users to the appropriate content. - Easier Site Management: Clearly defining relationships between documents with the
relattribute helps improve the overall structure and maintainability of a website.
How to Use
The rel attribute is used in both the <area> and <link> elements, but the way it defines relationships varies depending on the element. The key differences are outlined below:
| Tag | Purpose | How the Relationship is Defined |
|---|---|---|
<a> |
Creates a hyperlink | Explicitly describes the relationship to the linked resource |
<area> |
Defines a region in an image map | Explicitly describes the relationship between the area and the linked resource |
<link> |
Specifies the relationship between the document and an external resource | Explicitly describes the relationship between the document and the linked resource |
This table highlights how the purpose and method of using the rel attribute differ across each tag. Each element uses rel to express a different type of relationship and to communicate its meaning to browsers and search engines.
Commonly Used rel Attribute Values by Tag
Let's take a look at some of the most commonly used rel attribute values for each tag.
Note:
The rel attribute is flexible and not limited to a predefined list of values.
Since it is not strictly standardized, websites and applications can define custom values based on specific use cases. Developers may create their own rel values as needed.
The values listed below are commonly used examples, but they do not represent an exhaustive list. Custom or non-standard values may be added to meet different requirements.
Syntax
The rel attribute can accept multiple values, separated by spaces.
Common rel Attribute Values Used with the <a> Element
rel="author" |
Specifies that the linked document is the author of the current page. Often used to indicate authorship or contributor information for SEO and citation purposes. |
|---|---|
rel="bookmark" |
Indicates that the linked document is a permanent bookmarkable URL for the current page, often used to reference a permalink. |
rel="external" |
Specifies that the linked document is an external resource. This informs browsers and search engines that the link points outside the current site, which can help manage link equity and optimize SEO. |
rel="home" |
Indicates that the linked URL points to the website's homepage. This helps users and search engines easily identify and navigate back to the main page. |
rel="help" |
Indicates that the linked document provides help or support related to the current page. This assists browsers and search engines in understanding the link’s purpose. |
rel="me" |
ndicates a connection between the linked resource and the current document’s author or owner. Commonly used for social media profiles, personal websites, or blogs to denote official or owned digital assets. |
rel="nofollow" |
Instructs search engines not to follow the linked URL. This is used to prevent passing ranking credit or to discourage crawling of the linked page. |
rel="noopener" |
Prevents the newly opened page from accessing the original page via JavaScript, enhancing user security and protecting privacy when links open in new tabs or windows. |
rel="noreferrer" |
Instructs browsers to omit the Referer header when navigating to the linked resource, protecting referrer information. It also implies the behavior of noopener to enhance security. |
rel="sponsored" |
Indicates that the link is part of paid or sponsored content, helping search engines identify advertising or promotional links. |
rel="tag" |
Indicates that the linked document represents a tag related to the current page, aiding browsers and search engines in organizing and categorizing content. |
rel="license" |
Indicates that the linked document provides licensing information for the current page, helping browsers and search engines understand content rights and usage. |
rel="next" |
Indicates that the linked document is the next page in a series, helping browsers and search engines understand content pagination. |
rel="prev" |
Indicates that the linked document is the previous page in a series, assisting browsers and search engines with navigation and pagination understanding. |
rel="search" |
Indicates that the linked document provides a search interface or results page, helping browsers and search engines recognize and handle search-related content. |
rel="ugc" |
Indicates that the linked content is user-generated, such as comments or forum posts, helping search engines properly attribute and handle user-contributed content. |
Common rel Attribute Values Used with the <link> Element
rel="stylesheet" |
Used to link an external CSS stylesheet to an HTML document. Stylesheets apply styles that define the look and layout of the page. |
|---|---|
rel="icon" |
Used to link an icon to an HTML document. Known as a favicon, this small image appears in browser tabs, address bars, bookmarks, and website icons. |
rel="alternate" |
Indicates a link to an alternative version of the document, such as multilingual, print-friendly, or mobile versions, representing different formats of the same content. |
rel="canonical" |
Specifies the preferred or original version of a document. Primarily used to resolve duplicate content issues and inform search engines of the main page version. |
rel="preconnect" |
Indicates a link to a resource for which a preconnection is established. It helps set up early connections to the resource’s server, improving web page load times. |
rel="prefetch" |
Instructs the browser to fetch and cache a resource in advance. This reduces load times when the resource is later needed but should be used carefully to avoid wasting bandwidth on unused files. Prefetching targets resources not required for initial page rendering but potentially useful afterward. |
rel="dns-prefetch" |
Indicates that the browser should perform a DNS lookup for the linked external domain in advance and cache the IP address. This reduces latency when connecting to the domain, improving page load speed. |
rel="preload" |
Indicates that the browser should fetch and cache a resource in advance. It preloads critical resources needed for page rendering, reducing load times. Unlike rel="prefetch", which loads non-critical resources for potential future use, rel="preload" targets resources essential for initial rendering. |
Using rel="noopener noreferrer" with target="_blank"
The rel="noopener noreferrer" attribute is used for security and privacy purposes when opening links in a new tab or window.
Specifications
| Specification | |
|---|---|
rel
|
HTML Standard #linkTypes |
Browser compatibility
| Attribute |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
rel
|
1 | 12 | 1 | 1 |
rel="noopener"
|
49 | 79 | 52 | 10.1 |
rel="noreferrer"
|
16 | 13 | 33 | 5 |