Href="Tel:" and Mobile Numbers

<a href="tel:+18475555555">1-847-555-5555</a>

Use of Parentheses in HTML with href=tel:

Good question. Finding a clear, authorative answer regarding href="tel:" specifically is difficult.

RFC 3986 (Section 2.2) defines parenthesis as "reserved sub-delims". This means that they may have special meaning when used in certain parts of the URL. The RFC says:

URI producing applications should percent-encode data octets that
correspond to characters in the reserved set unless these characters
are specifically allowed by the URI scheme to represent data in that
component. If a reserved character is found in a URI component and
no delimiting role is known for that character, then it must be
interpreted as representing the data octet corresponding to that
character's encoding in US-ASCII.

(Emphasis mine)

Basically, you can use any character in the US-ASCII character set in a URL. But, in some situations, parentheses are reserved for specific uses, and in those cases, they should be percent-encoded. Otherwise they can be left as is.

So, yes, you can use parentheses in href="tel:" links and they should work across all browsers. But as with any web standard in the real world, performance relies on each browser correctly implementing that standard.

However, regarding your example (<a href="tel:+33(0)...), I would steer clear of the format you have given, that is:

[country code]([substituted leading 0 for domestic callers])[area code][phone number]

While I was unable to find a definitive guide to how browsers handle such cases, I think you will find, as @DigitalJedi has pointed out, that some (perhaps all?) browsers will strip the parentheses and leave the number contained therein, resulting in an incorrect number.

E.g.

<a href="tel:+33(0)1234567890">+33 (0) 123 456 7890</a>

will/may result in a call to +3301234567890. Will this still work? Maybe? We're getting into phone number routing territory now.

Some browsers/devices may be smart enought to figure out what is intended and adapt accordingly, but I would play it safe and instead simply use:

[country code][area code][phone number]

E.g.

<a href="tel:+331234567890">+33 (0) 123 456 7890</a>

There is no downside (that I know of) to having your local users dialing the international country code - it will result in the same thing as if the had omitted it and substituted the leading zero.

Here is some semi-related, useful information regarding browser treatment of telephone links: https://css-tricks.com/the-current-state-of-telephone-links/

How to disable link to phone number when on Desktop?

I was just dealing with this issue, looking up solutions, and I found this thread (and a few others). I have to confess that I couldn't get any of them to work properly. I'm sure I was doing something wrong, BUT I did figure out a cheat.

As others have pointed out, changing the CSS to hide the visible link indication (color, text-decoration, cursor) is the first and easiest step. The cheat is to define a title for the tel link.

<p>Just call us at <a class="cssclassname" href="tel:18005555555" 
title="CLICK TO DIAL - Mobile Only">(800) 555-5555</a>.</p>

By doing this, not only is the visible indicator of a link disguised (via CSS - see examples from others), but if someone does hover over the link, the title will pop up and say "CLICK TO DIAL - Mobile Only". That way, not only is there a better user experience, but your client doesn't accuse you of having a broken link!

href= tel: and Toll free numbers (0800) variable device behaviour

Have you tried with WTAI URI?:

<a href="wtai://wp/mc;0800000000">Call 0800-000-000</a>

I hope that this work for you!

Keep rocking!

how to call a phone number through javascript without using a tag?

Change this:

<table>
  <tr>
    <td>Phone: 900 300 400</td>
  </tr>
</table>

to:

<table>
  <tr>
    <td>
      <a href="tel:+900300400">Phone: 900 300 400</a>
    </td>
  </tr>
</table>

How to trigger a phone call when clicking a link in a web page on mobile phone

Most modern devices support the tel: scheme. So use <a href="tel:555-555-5555">555-555-5555</a> and you should be good to go.

If you want to use it for an image, the <a> tag can handle the <img/> placed in it just like other normal situations with : <a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" alt="Call 555-555-5555" /></a>

JavaScript window.location.href and click() methods doesn't work on mobile phone

You must call another tab to use "tel" action, try like this:

  $(function() {
    $('.phone').click(function() {
      var PhoneNumber = $(this).text();
      PhoneNumber = PhoneNumber.replace('Phone:', '_self');
      //PhoneNumber = PhoneNumber.replace('Phone:', ''); or without _self
      window.location.href = 'tel://' + PhoneNumber; 
     // you can use  window.open instead like this: window.open('tel:900300400')
    });
  });

In HTML:

<span class="phone">Phone: 900 300 400</span>

Using CSS classes to Format a href:tel link

You can use Attribute Selectors to match the begining of the href value to "tel", using the prefix comparision ^=:

a[href^="tel:"] {
}

This would match only the a tags which href property starts with the "tel" value:

Example:

a[href^="tel:"] {  color: red;}

<a href="http://www.google.com">Test 1</a><br /><a href="tel:+123456">Test 2</a>