Open link in a new tab - a good practice for websites, blogs

Users prefer to open links in a new tab

When you place a link on your website or blog, it can either open in the same tab, thus replacing the open webpage, or it opens in a new tab or a new window. 

When tabs first appeared on web browsers, they were lapped up by people though they looked annoying to some. And when tabs had become a norm on desktops, came mobile browsing in a big way. Initial mobile phone browsers did present a problem when a link opened in a new tab. 

Some diehard fans of 'single window, single tab' experience still don't like links opening in a new tab but the majority find it a better option.

The older lot also argue that tabs are being abused by many advertisers and therefore should not be there. You by chance hover the cursor over an ad or a text link and it quickly opens the ad in a different tab; not only that, the ad tab opens on top of the genuine tab. But I believe that such obtrusive ads can come in many other ways; only because some are misusing it should not make us shun them.

The main reasons why links that open a new tab are better than those opening upon the open webpage:
  • When links open on a new tab, the reader can keep reading the original article and visit the link (which is staying quietly in a new tab) later.  
  • If the link opens in the same tab, you can come back to the original page by pressing the 'back' button on the browser but that generally takes one to the beginning of the article and not the place up to where one had read the article before clicking the link. 
  • If a link opens on top of the existing webpage, and the reader keeps clicking on links in linked pages, he would forget the content of the earlier pages. This can be confusing and distracting.
  • Many readers do not come back when a new webpage replaces the original one. This diversion leads to visitors leaving the website, thus hurting SEO and monetization.
Links might work slightly differently on mobile devices. While doing research for this article I installed and checked all available browsers on different mobile phones. I found that most browsers have tabbed or single pane browsing as two options available in 'settings'. All new browsers have a small corner where the number of hidden tabs is shown. New mobile browsers are able to handle many tabs as nicely as desktops and laptops.

So, it is a good practice to make the links on your website/ blog open in a different tab. Let's see how we can do that.

Making links open in a new tab, using HTML

Opening of a link in a new tab is a standard HTML attribute to the LINK tag. If you don't know ABC of linking and are curious about what it means, let me explain:

All web pages (including blog posts) are rendered in the standard web language called HTML even if you use a different language to create web pages on the website or blog. When you want a particular word or picture to link to another web page, you insert the following tag in the HTML code of that page:

<a href "linked page URL" >text which becomes linked</a> 

[The text written in blue has to be replaced with actual expressions.]

Now, you want this link to open in a new tab. You only have to add target="_blank" within the HTML tag. 

Let me give you an example of a link that opens in a new tab:


I opened the HTML of this post on the post editor of my blogging platform (i.e. Blogger) and at the location above pasted the following expression:

<a href "https://www.indiantopblogs.com/p/blogging-for-beginners-starting-blog.html" target="_blank">Tips for beginners and new bloggers</a> 

What it has done is that it has written the words 'Tips for beginners and new bloggers' and linked them to the webpage on IndianTopBlogs website that talks about tips on starting a blog, etc. for new bloggers. When a visitor clicks on it, it opens the linked webpage in a new tab on his browser.  

Blogger and Wordpress give this option of opening a link in a new tab in the post editor and page editor. You select the words and click on the tool to provide the hyperlink. In that tool, there is an option to open the link in a new tab. You just have to check it. 

If your blogging platform or site builder software does not have this option, just add target="_blank" within the hyperlinking tag (<a></a> and there you are! 

I have given below the page source of a blog post with two hyperlink tags highlighted. Note the "target=_blank" attribute at the end of <a> tag.


open link in a new tab

For those interested in more details about opening a link in a new tab:

The target attribute can also be used with images and areas (as part of image maps).

In case of images, target is part of <a> tag itself. <img...> has to be placed within <a> and </a> to make it hyperlinked, like this:
<a... target="_blank".. >
<img...>
</a>

If you want to make parts of an image hyperlinked, the target attribute is to be within <area> as follows:
<img...>
<map>
<area 1... href...target="_blank"...>
<area 2...... target="_blank"...>
</map>