June 28, 2017

Why it is a good idea to open links in a new tab, and how to do it on the blog/ website

Opening links on a new tab is now a normal browser behavior.


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

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' user experience still don't like links opening in a new tab but 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 such obtrusive ads can come in many other ways; only because some are misusing it should not make us shun it.

The main reasons why I recommend that links should open in new tabs are:
  • The reader can keep reading the original article and would visit the link (which is staying quietly in a new tab) later. There is no distraction in reading the original or the linked article. 
  • Many readers do not come back when the new page replaces the original one. This diversion leads to visitors leaving the site/ blog, thus hurting SEO and monetization.
  • Readers who get a new page on top of the original page (in the same tab) often get confused, as they have not yet finished the original article. Moreover, if the visitor clicked a link on the first page, and then clicked a link on the new page and then clicked a link on the third page, he would not be able to read any article the way it is written.
  • Though it is always an option to come back to the original page by pressing the 'back' button on the browser, 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. 

Let's see how tabs affect browsing on mobile phones. While doing research for this article I installed and checked all available browsers on 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. Now most sites and blogs are mobile friendly; that further removes the pain that used to be when the mobile window used to be cluttered and any other tab would make the things even more confusing. 


How to make links open in new tabs


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 pages/ posts that we make on a website/ blog are written in the standard web language called HTML. When you want a particular word or picture to link to another web page, you insert the following 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 window. 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 blog editing window of my platform (i.e. Blogger) and at the present location pasted the the following expression:

<a href "http://indiantopblogs.com" target="_blank">India's Best Blogs in one place</a> 

What it has done is that it has written the words India's... and linked them to IndianTopBlogs website. When a visitor clicks on it, it opens the ITB website in a new tab on his browser.  

Blogger and Wordpress give this option of opening link in a new tab when in the post editor or page editor, you provide hyperlink to a word/ phrase. If your blogging platform or site builder software does not have this option, just add target="_blank" and there you are! You can use this anywhere where you give a hyperlink using HTML tag <a></a> .


HTML for blogging

For those interested in more details:

The target attribute can also be used with images and area (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>

No comments:

Post a Comment