Skip to content
Related Articles

Related Articles

Improve Article

How to make a call-able link using HTML ?

  • Last Updated : 11 Oct, 2019

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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :