Clickable links for mobile devices

I’ve grappled with this a few times, but have come to the conclusion based on several projects that the best way to markup phone numbers is like this:

<a href="tel://555-555-5555" rel="nofollow">555-555-5555</a>

And with CSS like this:

a[href^=tel] {
    cursor: default;
    text-decoration: none;
}

Most phones will recognize the phone number, and do their own thing with it.

If you’re feeling rambunctious you could try adding a pseudo element with a phone unicode character:

a[href^="tel:"]:before {
    content: "\260E";
    display: block;
    margin-right: 0.2em;
}
Clickable phone number with phone unicode character

Clickable phone number with phone unicode character

If for some reason you wish to disable mobile link detection (please don’t?) then you could use something like:

<meta name="format-detection" content="telephone=no" />

Mark Hammonds provides a pretty comprehensive list of how different popular devices (i.e. iPhone and Android) recognize phone patterns: “Mobile Web Quick Tip: Phone Number Links