HTML rel Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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 the target 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

&lt;link rel="stylesheet" href="style.css"&gt;<br><br>
&lta rel="external nofollow" href="http://www.google.com"&gt;Google&lt;/a&gt;

Browser Support

The following table will show you the current browser support for the HTML rel Attribute.

Desktop
Edge Chrome Firefox Opera Safari
121191
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 26th March 2024