What
The rel attribute provides both browsers and search engines with important context about how links should be interpreted and handled.
Why
rel attributes clarify link relationships that specifies the type of connection between linked resources.
Common values include:
- stylesheet: Links to a CSS stylesheet.
- icon: Links to a favicon or other icon for the page.
- alternate: Indicates alternate versions of the page (e.g.,print,translation).
- prev: Specifies the previous page in a sequence.
- next: Specifies the next page in a sequence.
- noopener: Prevents the linked page from controlling the original window.
- noreferrer: Prevents the browser from sending referrer information.
How
An example of the how the code would work. Here I am using noopener and noreferrer
Here is a link from this website to another website called MindfulVision
<a href="https://mindfulvision.org" rel="noopener noreferrer" target="_blank" title="link to mindful visions website opening in another window">MindfulVision</a>
When used together in a link's rel attribute, noopener and noreferrer provide a combined layer of security and privacy for both the user and the website they're visiting. Here's how they work together:
1. noopener
Prevents Tabnapping: It ensures that a newly opened page in a separate window or tab cannot control or manipulate the original window that opened it. This mitigates potential security vulnerabilities like phishing attacks or malicious code injection, where a malicious website could try to change the content of the original page or access sensitive information.
2. noreferrer
Protects Referrer Information: It blocks the browser from sending the "Referer" header when a user clicks the link. This header typically includes the URL of the page where the link was clicked, potentially revealing sensitive information about the user's browsing habits or personal data. By removing this header, noreferrer enhances user privacy and can make it more difficult for websites to track user behavior across different sites.