Today we will be demystifying another popular feature on websites that you surf, to the average netizen, the feature is really shiny and is quite convenient, I'll be revealing the secret of the magic trick to you and why we use them sometimes (we're not supposed to overuse them).
Have you ever clicked on a link and rather than the webpage loading, you find yourself in a new tab with the link you just clicked? It's a pretty annoying feature when it occurs as a result of popup advertising, it however is pretty handy when you don't want to have to go back when browsing.
A RELATABLE EXPLANATION
By opening a new tab automatically when you click the link, you can close the new tab when you're done exploring its content and return to where you were before you clicked the link. The "how" of making that feature possible is really easy.
When we're writing HTML code (which is the code responsible for all the content you see on the web), we have attributes that we embed in tags. Everything you see on the web is embedded in a tag, it's how the web categorizes things. attributes are added instructions to tags.
Now, these attributes can do a lot of things (that I won't be getting into today) one of which is getting a link to create a new tab when it's click. The amount of code is minimal, all we have to do is add the
target="_blank"
attribute into the anchor tag and you're it works. An anchor tag is a tag that is used to specify that its content is a link, any link you click is an anchor tag. I think I'll just write about tags and attributes in a separate post 😉. Now it's time to get to the use-case of the redirect feature.
WHY DO WE USE IT?
The feature we've been discussing is typically used when you're being redirected to a different website but the current website doesn't want you to leave them (because they're jealous 😂). There are also times when the page you're about to visit is an aside.
What I mean by an aside is that the page was set up to give more information about something in order to complement the current page but it's not a page we feel you'll stay in as you'll eventually need to return to the previous page.
Here on Hashnode, you pretty much see it a lot when you click on other articles written by a blogger here. You can try it by scrolling to the end of this post and clicking one of my other articles (a new tab will be opened automatically for you to read that article.
Lastly, we sometimes use this feature to link to a page where you want to complete an action but still return to the previous page, you can see this with E-commerce or if you run a blog and operate as an administrator.
Now this feature is meant to be used sparingly because each tab you open takes additional resources from your computer especially if you're using Google Chrome (I'm not demarketing Chrome, I love Chrome regardless and it's what I use, even in writing this post 😊).
It would also be a huge inconvenience to netizens if we build websites that always open a new tab when we click on them as it would eventually pile up and leave you with the stress of closing them 😪.
###FINALLY...
It's important to note that this feature has some drawbacks (which I only discovered today when I made more research 😥).
Hackers can use this feature on websites to redirect users, steal their sensitive information and get away with a phishing attack, this attempt is called tabnabbing. In order to protect netizens from this threat, an added attribute must be added, by adding
rel="noopener noreferrer"
after the target attribute, this security loophole is properly protected. an example of what this line of code will look like is
<p>Check out <a href="http://www.afrotada.com" target="_blank" rel="noopener noreferrer">Afrotada</a>.</p>
Disclaimer: I may have built that website using only HTML, CSS and Javascript. Hey! don't shame me 😓, it was my first project as a developer 😂.