How to Hyperlink a Phone Number in HTML

I was checking my own site last week and found a phone number listed on the contact page wasn’t actually a link. It read fine on the page. Tapping it on a phone did nothing, because the text underneath was never wired to dial. I made a short video walking through the fix and figured it’s worth a proper writeup too, since hyperlinking a phone number is such an easy thing to get wrong and an even easier thing to miss once it’s wrong.

The correct HTML tel link

A phone number becomes clickable with an anchor tag and a tel: link, the same idea as an email address using mailto:.

<a href="tel:+15551234567">(555) 123-4567</a>

Two details make the difference between a tel: link that works and one that’s broken. The href needs E.164 format. That means a plus sign, then the country code, then the digits, with no spaces, no dashes and no parentheses. The visible text between the tags is what a visitor actually reads, and that part can look however you want it to, parentheses included. The href and the visible text don’t need to match each other. They just both need to point at the same real number.

Why it matters beyond looking right

A real tel: link is trackable. Analytics, ad platforms and call tracking numbers all depend on a phone number being an actual link, not text someone has to copy by hand. Plain text or a broken link isn’t a click to call. It’s a dead end that happens to look like one. Some phones will even paper over the problem, letting a visitor long-press and dial anyway, which quietly hides the mistake from the site owner instead of fixing it.

Checking your own site for this, and whatever else might be quietly broken, takes time most people don’t want to spend. That’s exactly what the Website Fix covers. It’s a flat $150 diagnostic that tells you what’s actually wrong and what it costs to fix, credited toward the repair if you move forward.