When we want to direct a user to a third-party web page, the default behavior is for the link to go directly to that page in the same tab. You can keep users on your page by opening up the third-party external link in a new tab so your page is easy to navigate back to. This article covers how to do that.
Syntax
<a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">Click to See a Kitten!</a>
This particular feature is straightforward. You need to add a target attribute and set it to _blank. Depending on the browser’s settings, it opens up in a new browser tab or a new browser window. The noreferrer and noopener rel attributes are one part masking where you’ve come from and one part prevention of a malicious attack.
Noreferrer prevents SEO (search engine optimization) from noting where a particular user has come from. It shows up as a direct link instead. Noopener prevents a malicious html doc from accessing your document to do bad things.
Here’s the whole codebase:
<html> <head> <link href="./style.css" type="text/css" rel="stylesheet" /> </head> <body> <a href="https://placekitten.com/1000/1000" target="_blank" rel="noopener noreferrer">Click on the link to See a Kitten!</a> </body> </html>
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
