Links Without HTML 'A' Tags

Sometimes it is useful to link to another web page without the HTML a "anchor" tag.

Here are a few examples.

1. To hide the destination URLs from robots that look for links.

2. To omit awkward linking, such as linking an entire div and its contents with the HTML a tag.

3. To link without the default CSS styling for links and without hover or visited styles.

Generally, the non-a tag links are to destinations implemented with an onclick attribute. The onmouseover and other cursor-related attributes might also be used. Although devices without a mouse have no hover state, tapping might still work to send the browser to the desired destination.

For the purpose of this article, I'll call it an "onclick link" regardless how it is implemented.

The onclick link can be put into a span tag — or other container tag like div and img. The link itself (the value of the onclick attribute) uses the JavaScript location.href method.

Here is an example:

<div onclick="location.href='https://example.com/'">[CONTENT]</div>

The onclick link should work wherever the onclick attribute can be used.

If the onclick link is used for text, in a span tag for instance, and you want the link to be styled so it looks like regular HTML a "anchor" tag links on the page, it can be styled that way with CSS.

Note that the onclick link is JavaScript. Therefore, it won't work in browsers that have JavaScript turned off.

Step By Step Onclick Link Instructions

There are three very simple steps for creating an onclick link.

1. Determine the URL for the link's destination.

   The URL may be absolute (with http/https protocol and domain name) or relative (no protocol or domain name).

   Absolute URLs may be to any domain on the Internet, including the domain with the web page containing the link.

   Example absolute destination URL:

   https://example.com/webpage.php
   

   Example relative destination URL:

   /webpage.php
   

2. Construct the onclick attribute. The value of the attribute contains the location.href method and the URL determined in the previous step.

   Example onclick attribute:

   onclick="location.href='https://example.com/webpage.php'"
   

3. Paste the onclick attribute into an HTML container tag such as div, span, or td, or an img tag.

   Example onclick attribute in a div tag:

   <div onclick="location.href='https://example.com/webpage.php'">[CONTENT]</div>
   

Illustration

This example is an image. Clicking on it will send your browser to the home page of this website.

Here is the code.

<img onclick="location.href='https://www.willmaster.com/'" src="https://www.willmaster.com/images/wmlogo_icon.gif" style="border:none; outline:none;" alt="logo">

And here is the illustration.

Tap on the image to take your browser to the willmaster.com home page.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager