The HTML rel attribute defines the relationship between the current document and a linked external resource.
Definition and Usage
➔ The rel attribute handles values as follows when used with <link> element:
- stylesheet: The most common use, it imports an external CSS file.
- icon: Specifies an icon (favicon).
- preload, prefetch, preconnect: These tell the browser to prefetch, cache, or connect to a resource that will be needed later, which can improve page loading performance.
➔ The rel attribute handles values as follows when used with <a> and <area> elements:
- nofollow: Instructs search engine crawlers not to follow or approve the linked document. This is often used for paid links or user-generated unendorsed content.
- noopener: To reduce security vulnerabilities, noopener prevents the new page from accessing the window.opener property of the opening page.
- noreferrer: Prevents the browser from sending HTTP referrer headers to linked sites due to security concerns.
- canonical: Specifies the preferred URL for duplicate pages, which helps prevent duplicate content issues in SEO.
- next, prev: Indicates the next or previous document, useful for pagination.
Syntax
//In <ink>
Example: <link rel="stylesheet" href="style.css">
Example: <link rel="icon" href="favicon.ico" type="image/x-icon">
Example: <link rel="preload" href="main.js" as="script">
//<a> and <area>
Example: <a href="adspage.html" rel="nofollow">Visit our sponsor</a>
Example: <a href="external.html" target="_blank" rel="noopener noreferrer">External site link</a>
Example: <link rel="canonical" href="http://www.example.com/mypreferred-page">