HTML rel Attribute
Description
The HTML rel
attribute specifies the relationship between the current document and the linked document or resource. It's an attribute used primarily within <a>
, <link>
, and <area>
elements, providing additional information about the type of connection or association between the two resources. The value of the rel
attribute is a space-separated list of link types that describe the relationship's nature, purpose, or benefits in a machine-readable format.
For example, within an <a>
tag, the rel
attribute might specify that the linked document is a licensed version of the current document (rel="license"
), or it might indicate that the link should be treated as a nofollow link by search engines (rel="nofollow"
). In a <link>
element, commonly found in the <head>
section of an HTML document, the rel
attribute could be used to link to an external stylesheet (rel="stylesheet"
) or to define a canonical URL (rel="canonical"
).
The rel
attribute thus plays a crucial role in defining web document relationships, influencing search engine behavior, and enabling browser functionality like the preloading of resources. It helps in optimizing web navigation and ensuring the proper attribution and linking of web content.
Syntax
<tagname rel="nofollow | noopener | noreferrer | stylesheet | icon | canonical | dns-prefetch | external | author | help | license | prev | next | bookmark | search | alternate | tag" />
Values
- nofollowThis value is commonly used with the
<a>
element for anchor tags. It instructs search engines to not follow the link for ranking purposes. This can be useful when linking to external websites you don't endorse or for sponsored content. - noopenerThis value is specific to the
<a>
element and works alongside thetarget
attribute. It ensures that the linked content opens in a new, separate window without any browsing context connection to the current page. This helps prevent potential security issues or unexpected behavior. - noreferrerSimilar to
noopener
, this value is used with the<a>
element. It prevents the browser from sending the referrer information (the current page's URL) along with the link request. This can be useful for privacy reasons or to avoid tracking links. - stylesheetThis is a common value used with the
<link>
element. It specifies that the linked resource is a stylesheet containing CSS rules to style the current document. - iconThis value is used with the
<link>
element to define an icon for the document. This icon might be displayed in the browser tab, bookmarks, or other places. - canonicalPoints to the preferred version of a web page for search engines.
- dns-prefetchSpecifies to perform pre-emptive DNS resolution for the linked resource.
- externalUsed for links to external websites.
- authorIndicates the author of the current document or article.
- helpDenotes a link to a help article or guide.
- licenseLinks to the licensing information of a document.
- prevPoints to the previous page in a sequence of documents.
- nextIndicates the next page in a sequence of documents.
- bookmarkLinks to an external stylesheet.
- searchSpecifies the link is to a search page for the current page.
- alternativeSpecifies an alternative version of the current document (e.g., a mobile-friendly version).
- tag
Applies To
The rel
attribute can be used on the following html elements.
Example
<link rel="stylesheet" href="style.css"><br><br>
<a rel="external nofollow" href="http://www.google.com">Google</a>
Browser Support
The following table will show you the current browser support for the HTML rel
Attribute.
Desktop | |||||
12 | 1 | 1 | 9 | 1 |
Tablets / Mobile | |||||
18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 26th March 2024