htmlhreftel

Use of Parentheses in HTML with "href=tel:"


Surprised I can't find a definitive answer about this anywhere online: I am setting up a translated HTML page in French with a different contact number that begins with "+33 (0)." Since I can't personally test it on this number -- a canonical question: can I get away with an anchor tag that begins <a href="tel:+33(0)..." i.e. has a number contained in parentheses with the remaining numbers following and have the link work?


Solution

  • 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, ultimately resulting in an incorrect number, e.g.

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

    ...which 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 123 456 7890</a>
    

    or

    <a href="tel:+331234567890">(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 they had omitted it and substituted the leading zero.


    As a side note, according to the ITU's (International Telecommunications Union) E.123 document, section 7.2,

    The ( ) should not be used in an international number.

    This recommendation concerns how phone numbers are written, but is of some relevance in terms of the text that should be used when creating an href="tel:" link, and is the reason for the two alternative examples I have provided above.

    (Credit to @NiKiZe for this semi-related info).


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