Open In App

How to make a call-able link using HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

With the rise of mobile web surfing the benefits of calling directly from a web page have become more realistic. Making a call-able link is easy with the use of HTML. HTML provides browsers with protocols such as tel which are used to add clickable phone numbers. Every browser responds differently to these protocols. Some launch the phone app with the number on the display, waiting for you to call while others directly make the call.

Approach:

  • Add tel:(a number) inside href attribute of the anchor tag.
  • You can even add country code for international calls as a part of the number.
  • Some phone numbers have an extension. You can add p before the extension that will cause a one second delay before dialling the next phone.

Syntax:

<a href="tel:(countrycode)(NUMBER)p(extension)"> Text </a>

Example 1: This example create a call-able link using HTML.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make a call-able
        link using HTML ?
    </title>
      
    <style>
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <h3>
        Make a call-able link using HTML
    </h3>
      
    <a href="tel:9876765678">
        Call to GeeksforGeeks support
    </a>
</body>
  
</html>


Output:

  • Before click on the link:
  • After click on the link:

Example 2: This example create a call-able link using HTML.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to make a call-able
        link using HTML ?
    </title>
      
    <style>
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        a {
            text-decoration:none;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
      
    <h3>
        Make a call-able link using HTML
    </h3>
      
    <a href="tel:9876765678p107">
        📞 Help
    </a>
</body>
  
</html>


Output:

  • Before click on the link:
  • After click on the link:


Last Updated : 11 Oct, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads