How to make a call-able link using HTML ?

Last Updated : 03 Oct, 2024

To make a callable link using HTML means creating a hyperlink that allows users to initiate a phone call directly from their devices. This is done using the <a> tag with the href attribute set to tel: followed by the phone number. When clicked, this link opens the phone dialer on supported devices, enabling users to call the specified number with ease.

Approach: Basic Callable Link with Phone Number

Create an anchor (<a>) tag with the href attribute set to tel: followed by the phone number.
This link will open the phone dialer directly when clicked, allowing users to call the number.
Add a descriptive text (e.g., "Call Us") inside the anchor tag to inform users about the action.
Use plain phone numbers in the tel: attribute, which will be dialed exactly as specified on supported devices.
This approach is simple and effective for creating clickable phone links across various devices.

Syntax

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

Example 1: In this example we creates a centered page with a heading, subheading, and a clickable link that allows users to call "GeeksforGeeks support" by clicking the link.

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:

ABD — make a call-able link using HTML Example Output

Example 2: In this example we creates a centered page with a heading and subheading. It includes a clickable phone link with an icon that allows users to call a number with an extension by clicking on the link.

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">
        &#128222; Help
    </a>
</body>

</html>