iPhone Calling and Texting Links

This is the calling one (probably more useful if the clickable text is words, as the iPhone auto-detects phone numbers and does this automatically):

<a href="tel:1-408-555-5555">1-408-555-5555</a>

This is the SMS one, which overrides the default calling behavior:

<a href="sms:1-408-555-1212">New SMS Message</a>

Not sure what other things these links might work on... Might be a little dangerous as having non-standard links that don't work or bring up errors is kinda bad UX. Best for mobile-only sites. If someone know if this works on Android/Blackberry/Other Mobile, comment below.

Reference URL


  1. Aaron
    Permalink to comment#

    I think using “callto:” instead of “tel:” is more useful – these work with Skype on the desktop too.

    • Ucavus
      Permalink to comment#

      callto: is proprietary. tel: is RFC, works on many devices and is understood by Skype.

  2. Andrej Badin
    Permalink to comment#

    Should be combined with some device detection script, which would keep us from non-standard link on unsupported devicec.

  3. Dinesh Verma
    Permalink to comment#

    will this work with android too.

    • traq
      Permalink to comment#

      if you hold-click on a phone number, android will bring up a dialing menu. I think you need a dedicated app to actually make the call, however, at least when I tried it on a 2.2 tablet

  4. Josh
    Permalink to comment#

    Yes i can verify it works on android with one exception it doesn’t auto call you have to hit call yourself…so all it does is bring the number up when trying to call but texting opens a new message.

  5. russ
    Permalink to comment#

    hey team,
    stumbling back onto this thread, email signatures in mind.

    means by which we might optimize a phone number to play ball with a wide-range of devices/interfaces/clients when clicking from an email signature (mac mail in this case)?

    e.g. i’m joe recipient in calgary, got an email from a colleague in buenos aires (yep) – skype happens to be my preferred mode of contact right about now.. any means of making it so that i can choose between ‘phone,’ ‘text,’ ‘skype,’ when i click the telephone number on my phone or desktop?
    sure would be awesome – but too idealistic a query?

  6. Mike Swizzy
    Permalink to comment#

    Reference IETF Standard RFC3966 [ http://tools.ietf.org/html/rfc3966 ]. I have verified that this works on most mobile units… Click (tap) the link, and you’re taken directly to the dialer with the phone number auto-filled. Include *meta name=”format-detection” content=”telephone=no”* in the header to force this format on all devices.

  7. David Do
    Permalink to comment#

    This is new to me, but let me try

  8. Enrique

    Any idea how to make this work when the phone number contains the “number sign” #? I don’t know about other countries, but this is pretty common in Spain for functions such as activating or deactivating services like roaming, etc. I’ve already tried HTML-entifying it as # but phone won’t still get it. They just seem to link to the phone number without the # part…

    • James
      Permalink to comment#

      Yes Enrique, replace the # with two zeros… It works the same on telephones.
      rather than
      “+ 40 012345678” you use
      “00 40 012345678”

    • Someone
      Permalink to comment#

      # has to be URL-encoded as %23.

  9. Chase
    Permalink to comment#

    I just used this technique on a mobile site I made for a client. Works beautifully. Thanks!!!

  10. Laura
    Permalink to comment#

    Thank you for this great tip! I just used it on a site and it was so easy-once someone so gracious shows you how! : )

  11. Andrew
    Permalink to comment#

    I swear that you get the links if you implement microformat structures as well.

  12. Jenna
    Permalink to comment#

    how do u set it up to like not just call one person like how do u make it go to like ur missed calls and contacts and stuff for iphone

  13. Marc
    Permalink to comment#

    Use of “tel” results in a 404 error on desktop mac. “callto” works.
    Another source touted as better incorporates use of jQuery, though I have yet to try it out.

  14. Carlton Stith
    Permalink to comment#

    I am redesigning my web site right now and I used this for my contact section. Thanks!

  15. Vic Dinovici
    Permalink to comment#

    I am trying to add a call link on an image into an email. I tried both tel: and callto: using the phone # with no “-” and with them. It’s just not working. When I open the email in browser and I tap this time on the text number, it works. Any idea what else I can try?

  16. Marc
    Permalink to comment#

    Here are my notes for how I had success with this. I usually create two html files for my eblasts. One for sending and one for viewers to land on if they are unable to view the images in the email. The difference I found is that the email handles it differently that safari.

    Hope this helps.

    For the eBlast, set the link on the phone image to be


    But for the browswer either desktop or mobile, set the link to be

    On the desktop, clicking with initiate skype if available.

    On mobile device within the browser, clicking will initate the phone call.

  17. octavioamu
    Permalink to comment#

    And what about big numbers in text? I you have “some text about something 000000000” in iphone this 00000000 becomes a call link automatically….

  18. adam
    Permalink to comment#

    for linking to sms does anyone know if possible to pre-populate the body field for the text message

  19. Himu


    What if I want to ad an extra code that one dials when the call is connected? Can that be made automated?

  20. anil
    Permalink to comment#

    showing W3c error ….

  21. Gregg
    Permalink to comment#

    For those that have been asking, the “tel” link does work on Android. The “callto” link does NOT. This is per my Samsung Note II running Jelly Bean.

  22. Kumar
    Permalink to comment#

    One thing that works really well for setting up an SMS link texting form if you don’t want to spin up a back end is Link Texting.

    We built it to make this issue a thing of the past.

  23. Farhan Islam
    Permalink to comment#

    This article comes with great information.

    I was trying to add the tag but forgot the exact spell to use.

    Also the sms tip is so awesome ^_^

  24. Jesse
    Permalink to comment#

    We use http://notifynotify.com to capture emails and store them in a database. They have a really simple editor and even a recurring reminder scheduler which is off tap.

  25. Yves
    Permalink to comment#

    Same Q’s Himu. Is there a way to insert DTMF after the call has been established? For instance, I want to contact 555-555-5555, when the called party picks up, I want the system to automatically press # then 2 # etc… etc…

  26. Paul D
    Permalink to comment#

    For anyone wanting a simple means of alternating how the tele number is presented (mobile vs non-mobile) :


    <a class="phone-mobile" href="tel:1-800-555-1212">+1 (800) 555-1212</a>
    <span class="phone-nonmobile">+1 (800) 555-1212</span>


    /* Change behaviour of footer phone link on MOBILE */
    @media screen and (max-width: 750px) {
        .phone-mobile {
            display: inline;
        .phone-nonmobile {
            display: none;
    /* Change behaviour of footer phone link on NON-MOBILE */
    @media screen and (min-width: 750px) {
        .phone-mobile {
            display: none;
        .phone-nonmobile {
            display: inline;

    Employ whatever device size suits your particular project!


  27. JonW
    Permalink to comment#

    Is there a way to have a link that not only dials the number and then dials an extension? Essentially it would have to dial, pause for a bit and then dial another set of numbers.
    I know back in the dark days of dial-up you could do this by inserting commas between the 2 sets of numbers, but not sure it it would work with html.

  28. Aaron Hall
    Permalink to comment#

    The “Reference URL” to this page https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/Articles/sms.html#//apple_ref/doc/uid/TP40008054-SW1 no longer worked. Is there another page out there? Thank you.

  29. Ben
    Permalink to comment#

    How would you add this tag to a PDF using itextsharp with razorpdf? I need both the controller syntax and the razor html markup syntax.

  30. Ari
    Permalink to comment#

    Hi, is there a way to add 2 phone numbers in the same href?

  31. Olly

    hey Dudes, I’m having trouble getting html code for website phone click to call link – it works but only if you click and hold. How could I get it so it just needs a quick click (rather than click and hold)??? (like all the others out there!)

  32. besnoid
    Permalink to comment#

    Anyone able to get this to work in iOS 10? Seems to be broken. Anyone getting it to work?

  33. Brian Forrest
    Permalink to comment#

    I just added the SMS snippet to my new wordpress site and it works perfectly!! Thanks!!


Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.