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