Making Phone Numbers Clickable

I was adding a graphic to a webpage I’m marking up and the graphic contains the company’s Toll Free phone number.

I thought it would be convenient if the graphic could be clicked to call the Toll Free number if someone is using a phone.

Fortunately this is really easy to do. Just wrap your phone number in a link like this:

<a class="tel" href="tel:8001234567">(800) 123-4567</a>

The class attribute “tel” is totally optional and has nothing to do with the link being clickable. The only weird thing I see is that in a desktop environment, the link appears to be clickable, but doesn’t to anything. Seems pointless and confusing rather than convenient in this instance.

How can this be resolved? A splash of CSS.

a.tel { cursor: default; /* no hand pointer */ }

Have an alternative solution or see something wrong? Let me know.


About Joseph R. B. Taylor

is a designer/developer who makes stuff for screens of all shapes and sizes. He currently works at Edvisors, Inc. where he creates screen-based experiences for used by millions of college students every year.

Wanna Talk?

Contact Me