Explain Codes LogoExplain Codes Logo

Href="tel:" and mobile numbers

html
prompt-engineering
meta-tags
responsive-design
Nikita BarsukovbyNikita Barsukov·Dec 6, 2024
TLDR

Utilize the tel protocol within a tag's href when creating clickable phone number links.

Example:

<a href="tel:+1234567890">+1 (234) 567-8900</a>

This snippet allows you to dial +1 (234) 567-8900 on your device with just one click.

Breakdown of the format

Precise formatting is a must when creating tel links. Consider the following while doing so:

  • Country Code: Include the country code. It's the equivalent of the passport for international dials. Think Batman - can't travel without it!
  • Area Code: If applicable, don't forget the area code. This is your mini-GPS for routing the call.
  • Trunk Prefix: Trunk prefixes are like breadcrumbs, handy locally, but in the international scene, we lose the 0.
  • Dialing Extensions: To dial extensions, you'll want to use ; or ,, they work like your breather in a marathon call.

Congratulations! You've just created your first tel number link that can jet-set around the globe!

Meta tags are your magic wand

Meta tags are in your arsenal for controlling how mobile browsers handle phone numbers. Because who doesn't like being in control, right?!

  • To prevent mobile Nosferatu from linking your numbers automatically:
    <meta name="format-detection" content="telephone=no">
  • Wield this spell for BlackBerry devices, it wards off the auto-linking:
    <meta http-equiv="x-rim-auto-match" content="none">

Flex your international dialing muscles

Every country has an international dialing code and format. You'll want to ace these so your tel links don't feel like a fish out of water:

  • Let's use North America as an example:
    <a href="tel:+1-xxx-xxx-xxxx">+1 (xxx) xxx-xxxx</a>
    Little note: the "1" is the country code and not a hotline to Batman!
  • For our international folks, here's the catch:
    <a href="tel:+[country code][phone number]">+[country code] [phone number]</a>
    Here's a metaphor for you: '+" is your "Ready, Set, Dial!" command.

Extension numbers: Because "Operator, can you help me place this call?" isn't a hit anymore

Extensions in phone numbers are tricky beasts that can be tamed with the help of semicolons or commas, they're your hold music without the '80s one-hit wonders:

  • Semi-colons play the waiting game. After the main number dialing, they pass you the baton to dial the extension. Like a relay race, but at a snail's pace.
  • Commas, on the other hand, are your very own speed-dial for extensions, pausing and then automatically dialing. It's like Fast and the Furious for phone calls minus Vin Diesel!