In this tutorial, I am going to teach you how you can add HTML telephone link which is excellent and must have feature for all the websites. When you try to add a phone number to your website page, it just appears as a static text which doesn’t offer zero interaction with your visitors. You can solve this problem by implementing a telephone link using HTML. As we all know, most people access the internet via their smartphones these days. So having telephone HTML link can be quite useful.
It’s time for you to feature your phone number in clickable areas. Also, you need to make sure that they can directly call the number with a single click, instead of copying and pasting the phone number in static text form into your dialer. It’s inconvenient.
Just as in the case of a one-click email feature, you can feature your phone number in a manner which makes it easier for your visitors to use. As for making one-click email possible, we use mailto: in the href.
<a href="mailto:firstname.lastname@example.org">Test Email</a>
Let’s take a look at an example of HTML telephone link below:
<p>Call now <a href="tel:0987654321">0987 654 321</a></p> <p>Order now <a href="tel:0987654321">0987 654 321</a></p>
How to Set up HTML Telephone Link for Skype?
In case if you wish to make the call from Skype using HTML, then you need to use callto: attribute in place of tel: This way you can implement telephone link in Skype.
<p>Call now, <a href="callto:0987654321">0987 654 321</a></p>
Implementing HTML Text Telephone Link for iPhone
When it comes to the iPhone, you need to keep something in mind. iPhone automatically detects phone numbers in HTML layout. Therefore, it would be ideal to present the number as a text by adding hyphens.
Let’s see the example for iPhone telephone text link below:
In case if you want to send an SMS to the number using iPhone, you should use the following code:
<a href="sms:1-234-555-6789">Send Some Cool Messages!</a>