How to make a call-able link using HTML ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.