Correct links 15 February 2006

Hyperlink (or just link) is one of the main elements of hypertext that enables to navigate between web documents.

What a hyperlink is and how to create it in HTML is common knowledge. (You can go on and revise the original: HTML 4.01 Specification: Links.) But unfortunately hyperlinks that are used incorrectly can be seen quite often.

Example 1. Popup windows

Lets look at a simple example with feedback popup window. Here is the most frequently script for it:

   Feedback popup window

It has the following drawbacks:

1. The window pops up only if the user’s browser enables JavaScript and it’s turned on. The user with no JavaScript support will be taken to the URL defined in the href attribute. The location bar will show the location with an added hash mark (#). If JavaScript is disabled, the popup window the user is supposed to see will not appear, unless the user finds the link location in the page source.
2. With mouse cursor hovered over such link the status bar shows [the current URL]# (for example, http://www.somesite.com/#) instead of the actual location (for example, http://www.somesite.com/feedback/). Knowing the URL is useful as it helps the user to understand whether he needs this page or not.
3. If the user clicks the right mouse button and chooses to open link in new window, he will be once again taken to [the current URL]# and is likely to grow angry with the website makers.
4. Search engines, just like users with disabled JavaScript, will not be able to target such pages and, of course, will not index them. Take an example of Googlebot that navigates only the links specified in the href and src attributes.

By the way, situation when JavaScript in the user’s browser is not enabled is rather true-to-life. Firstly, a browser (for instance, an older or a new experimental one) may not support JavaScript or enable it only partly. Secondly, the user may turn off JavaScript capabilities in the browser options menu (it’s often the case with visitors to x-rated websites who wish to stop the flood of popups). And finally, even if JavaScript is on, the browser may encounter errors due to invalid script.

Lets figure out why is that hash mark used in the href attribute when handling onclick events. Creating a clickable link requires href attribute. But if the href is left empty, MSIE assumes that it refers to the current directory. For instance, href="" inside /folder/page.html refers to /folder/. Other browsers interpret an empty href as a link to the current page. In both cases clicking the link causes the page to reload. In order to avoid this, you can use the so-called anchor, i.e. a link to an object in the page content. In fact, <a href="#"> means that you have created an anchor leaving out the URL fragment it should refer to.

Another thing that’s used rather often is javascript: protocol, for example, href="javascript:void(0)" or href="javascript://". When the user clicks the link, this protocol instructs the browser to launch JavaScript interpreter instead of initiating an HTTP request (default action). Void(expression) function computes expression value, but returns nothing. // is a comment symbol. You can see that both times nothing happens. Apparently, with javascript: protocol you run into the same problems as with hash mark.

You can fix it in three steps:

1. Replace the hash mark in the href attribute with the real URL.
2. Add target attribute, so that a new properly named window pops up, even if JavaScript is disabled. It might be a good idea to add the site’s URL to the name of the window in order to allow different sites open windows with names that don’t match. Or else a page may load in the window that used to display a similar page from another site, and the user might not notice that.
3. In popup properties define this.href and this.target.

   Feedback popup window

I’d like to point out that target attribute is not present in HTML Strict, so do not use it if your site is rendered in standards mode.

Example 2. Large images

Task: Display large images over the content.

This sample is borrowed from St. Petersburg website
Photograph Alexander Yaroslavtsev

This sample is borrowed from St. Petersburg website
Photograph Alexander Yaroslavtsev

Lets not go into detail of the script and concentrate on creating the link to the large image. This is how it’s usually done:

   <img src="/i/small.jpg" width="134" height="145" border="0" />

As you can see, the trouble here is the same as in the first example—users without JavaScript won’t see the large image, and the hash mark location in the status bar won’t allow them to open it in another window.

To help the situation you can specify the link to the large image in the href attribute:

   <img src="/i/small.jpg" width="134" height="145" border="0" />

It’s OK that with JavaScript disabled the image will appear in the same window and not the way intended (that is, it won’t overlay the page content). What matters is that the user will be able to see it, and it’s better that nothing at all.

And you have to admit that when you hover the cursor over the link, it’s better to read /i/big.jpg in the status bar than find some hash mark or javascript: protocol there. Besides, it tells you what will happen if you click the link.

You may use JavaScript for creating links to add special effects to the page (make interactive objects, prevent useless reload of the page and so on). And if you turn these capabilities off, the site should retain its functionality.

Example 3. Redundant links

Lets examine the way the image in the previous example was closed. In this respect, you’d often see this:

   <img src="/i/close.gif" width="17" height="17" border="0" alt="Close" />

This way there is no document to refer to because the click on a cross only hides the large image. If the link doesn’t take you anywhere, why use it? Most of the time, a link is employed to make the hand cursor appear. Now, can you manage without a link? The answer is yes, you can and must do it.

An HTML layout is good if the elements are used according to their purpose, their appearance in a browser should never play major part. In the above example the link does nothing but helps to creates a visual effect, so it has to be removed.

Here is what you should do:

1. Remove the link.
2. Define the onclick event directly for the image with a cross.
3. Specify cursor style for the image: style="cursor: pointer; cursor: hand;". (To make my point, I defined it inline in the style attribute, but it is better to create a separate class when making a site).

<img src="/i/close.gif" width="17" height="17" border="0" alt="Close"
     style="cursor: pointer; cursor: hand;"
     onclick="close('1'); return false;" />

Conclusions