How to create hyperlink to call phone number on mobile devices?

Hyperlink

Mobile Devices

Phone Number Link

Click-to-Call

Mobile Web Development

How to create hyperlink to call phone number on mobile devices?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

A click-to-call link lets a mobile visitor open the dialer with one tap instead of copying a phone number by hand. The feature is simple, but production code still needs clean formatting, accessibility text, and sensible behavior on devices that cannot place calls.

Use the `tel:` URI Scheme

Mobile browsers understand the tel: URI scheme and hand it off to the phone app or dialer. The basic pattern is an a element whose href starts with tel: followed by a normalized number.

html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>Call link example</title>
7  </head>
8  <body>
9    <p>Need help right away?</p>
10    <a href="tel:+14165551234">Call +1 416 555 1234</a>
11  </body>
12</html>

Use an internationally formatted number when possible. +14165551234 is easier for devices to interpret than a local-only string such as 416-555-1234, especially if the page has visitors from multiple countries.

The visible text can be formatted for humans, while the href can stay normalized for the browser. That separation improves readability without sacrificing reliability.

Improve Accessibility and Visual Clarity

Users should understand that activating the link will open the dialer. Screen reader users also benefit from an explicit label, especially if the visible text is short or decorative.

html

1<a
2  class="call-link"
3  href="tel:+14165551234"
4  aria-label="Call customer support at plus one four one six five five five one two three four"
5>
6  Customer Support: +1 416 555 1234
7</a>

css

1.call-link {
2  display: inline-block;
3  padding: 0.75rem 1rem;
4  border-radius: 0.5rem;
5  background: #0f766e;
6  color: #ffffff;
7  text-decoration: none;
8  font-weight: 600;
9}
10
11.call-link:focus,
12.call-link:hover {
13  background: #115e59;
14}

This version does three useful things:

It makes the action obvious with descriptive text.
It exposes a clear accessibility label.
It styles the number like a deliberate action instead of a plain paragraph.

If you publish multiple numbers, label each one by purpose, such as sales, support, or after-hours emergency line.

Add Optional Tracking Without Breaking the Link

If you want analytics, attach a click handler that logs the event but still lets the browser continue to the dialer. Avoid complex JavaScript that delays navigation too long.

html

1<a id="sales-call" href="tel:+14165559876">Call sales</a>
2
3<script>
4  const link = document.getElementById("sales-call");
5
6  link.addEventListener("click", () => {
7    console.log("Call link clicked");
8  });
9</script>

This is enough for a basic site or for verifying behavior in a local test page. In a real application, the handler could call your analytics library before the user leaves the page context.

You can also provide a fallback contact method nearby. A short block with both a phone number and an email link works well when the device is a desktop browser or a tablet with no calling capability.

html

1<p>
2  Prefer email?
3  <a href="mailto:[email protected]">[email protected]</a>
4</p>

Common Pitfalls

One common mistake is placing spaces, parentheses, or punctuation directly into the href value. Some devices tolerate that formatting, but a normalized number is more dependable. Keep formatting in the visible text, not in the underlying link target.

Another issue is assuming every desktop browser will behave like a phone. Some desktops may open a calling app such as FaceTime or Skype, while others do nothing useful. That is why a nearby fallback, such as a plain displayed number or email address, improves the experience.

Accessibility is often overlooked. A link that only says Call now gives little context if there are multiple contact numbers on the page. Use descriptive text or an aria-label so assistive technology can tell the user exactly which number will be called.

Finally, avoid intercepting the click with JavaScript and calling preventDefault() unless you are intentionally replacing the browser behavior. Blocking the default action is an easy way to break dialing on mobile devices.

Summary

Use href="tel:+countrycodephonenumber" for reliable mobile click-to-call links.
Keep the number normalized in href and format it nicely in the visible text.
Add descriptive labels so users and screen readers know what will happen.
Treat analytics as optional enhancement, not as a reason to block the default call action.
Offer a fallback contact method for devices that cannot place calls.

How to create hyperlink to call phone number on mobile devices?

Master System Design with Codemia

Introduction

Use the tel: URI Scheme

Improve Accessibility and Visual Clarity

Add Optional Tracking Without Breaking the Link

Common Pitfalls

Summary

Use the `tel:` URI Scheme