This quick tip demonstrates how to create phone number links with HTML. The techniques in this tip work on both Android and iPhone devices and can greatly improve the experience of mobile web site visitors.

If you need extra help with any aspect of mobile development, feel free to commission one of the Envato Studio experts. Otherwise, read on for the instructions.

Default Phone Links

By default on iOS and Android, the device browser will "magically" create links out of text interpreted as a phone number. When the user taps one of these links, the device phone application will launch. The exact phone number patterns that will be automatically turned into links vary between platforms, but I've listed several of the patterns I've successfully tested below:

• 555-5555 (iPhone Only)
• (555) 555-5555 (Android + iPhone)
• +1 (555) 555-5555 (iPhone Only)
• 555 5555 (iPhone Only)
• 555 555 5555 (Android + iPhone)
• +1 555 555 5555 (iPhone Only)
• 555.5555 (iPhone Only)
• 555.555.5555 (Android + iPhone)
• +1 555.555.5555 (iPhone Only)

If your site or app uses one of the cross-device formats above, your users should already be able to quickly make calls just by tapping the text.

Creating Phone Number Links

The recipe for creating your own phone number links is simple. Instead of using a normal link based on the HTTP/S protocol or the file system, you can use the "tel:" protocol. This works just like a normal link would, only instead of the href attribute pointing to a URL or file, you prepend either "tel:" or "tel://" to a phone number.

Check out the following examples to see this in action:

<!-- Embedded within normal page text -->
<p>If you'd like to talk, <a href="tel:5555555">Call Me!</a></p>

<!-- Linking a custom image -->
<a href="tel://555-5555"><img src="phone.png" alt="Call Now!" /></a>

<!-- Cross-platform compatible (Android + iPhone) -->
<a href="tel://1-555-555-5555">+1 (555) 555-5555</a>

NOTE: The above code should be tested on a physical device. It will not work on the iOS SDK emulator.

The last example snippet is especially worth noting. Many web developers don't have the luxury of performing extensive mobile device testing on both iPhone and Android, so it would be easy to miss the fact that some of the phone formats listed at the beginning of this tip will not be auto-recognized on all devices.

Because the phone formats recognized may vary between devices, I suggest always wrapping your phone numbers in a link with the "tel://" prefix. Not only will doing so ensure that the greatest number of devices will link to the phone application, but this also seems to be a more explicit, accessible, and semantic approach to handling phone links.

Of course, if the content you are creating might be viewed on a device without a phone, you should either use a server-side language to only add the "tel:" links when necessary, or you should check the device type with JavaScript and add the links to the page progressively when applicable.

Disabling Link Detection

For both Android and iPhone, you can easily disable automatic phone number linking with the following meta tag:

<meta name="format-detection" content="telephone=no" />

This meta tag will disable phone number auto-linking while still allowing you to manually create phone number links using the "tel://" method described above.

That's it for this tutorial! If you want to take your mobile development further, check out the huge selection of useful app templates on Envato Market. There are thousands to choose from, for both Android and iOS.