Linking Without an 'A' Tag

I found a certain technique useful for several projects of late. And I thought you might find a use for it, too.

I call the technique a "span link" because a SPAN tag is used instead of an A tag for certain actions. (DIV or other tags can also be used.)

Here is a short list of ways I've used the span link.

1. For links that only run JavaScript when they are clicked. They don't load a new page into the browser.

   The same thing can be done with href="javascript:..." within an A tag. With the span link, however, any JavaScript that affects the A tags on a page will not affect the span link.

2. For links that only run JavaScript when a mouse hovers over it. They're not supposed to load a new page when the link is clicked.

   The span link in this case is so much more elegant. An A tag must have an href attribute and, if the link is used only for an onmouseover, the href must be constructed to do nothing when the link is clicked.

3. Hide from spiders that another web page is being linked to.

   Perhaps you wish to link to another website for the convenience of your visitors. Yet, the other website is not in the same category as yours and you don't want certain search engines to think your site is similar to that other.

   Or, you simply don't want to provide link juice to the other site. (See this page for "link juice" definition.)

Several drawbacks exist and must be considered. Only you can decide whether or not they would be of consequence for the implementation you are considering.

1. The window status bar text does not display the span link URL.

2. The span link does not have visited or hover characteristics like a regular link can. (Workarounds could be built. Those techniques are outside the focus of this article.)

3. JavaScript is required for the span link to work.

Step By Step Span Link Instructions

First, create a CSS class for the span link. The examples in this article assume "pseudolink" is the class name.

<style type="text/css">
.pseudolink { 
   color:blue; 
   text-decoration:underline; 
   cursor:pointer; 
   }
</style>

To keep span link formatting the same as regular links (optional), format the pseudolink class the same as the A class. Then, add the cursor:pointer definition.

The cursor:pointer definition causes the mouse cursor to be the same shape as it is when hovering over a regular link.

A JavaScript onclick Example

Here is an example of running JavaScript when a span link is clicked: Click here.

A click runs the alert() function with a message. Any other built-in or custom written JavaScript function could be run as well.

Here is the code to create the above span link.

<span 
   class="pseudolink" 
   onclick="alert('An &quot;onclick&quot; example.')">
Click here.
</span>

A JavaScript onmouseover Example

Here is an example of running JavaScript when the cursor moves over a span link: Click here.

A mouse over the span link runs the alert() function with a message. Any other built-in or custom written JavaScript function could be run as well.

Here is the code to create the above span link.

<span 
   class="pseudolink" 
   onmouseover="alert('An &quot;onmouseover&quot; example.')">
Click here.
</span>

A Link Example

Here is an example of opening a new web page in the browser when a span link is clicked: Software to Make Your Website Work

Here is the code to create the above span link.

<span 
   class="pseudolink" 
   onclick="location='https://www.willmaster.com'">
Software to Make Your Website Work
</span>

A Link Open In New Window Example

Here is an example of opening a web page in a new browser window when a span link is clicked: Software to Make Your Website Work

Popup blockers might keep that span link from working. (Popup blockers can also affect the regular link target="_blank" attribute.)

Here is the code to create the above span link.

<span 
   class="pseudolink" 
   onclick="window.open('https://www.willmaster.com')">
Software to Make Your Website Work
</span>

Those are four ways to use the span link instead of an A link. When their use is appropriate, they can be rather elegant solutions.

Will Bontrager