How to Add Telephone Links with HTML

Solution with tel:

Telephone links are the ones that you tap to call a number on phone-capable devices. Of course, some devices are able to recognize phone numbers and provide the linking automatically, but it’s not always so.

In the example below, we use :tel within the HTML <a> tag. Note that tel: is much like a protocol, and not a feature.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="tel:+05890000111">0-589-0000111</a>
  </body>
</html>

Result

There isn’t any documentation (official) on this protocol handler for links. That’s why there can be differences in browser support and behavior. Commonly, browsers make different decisions on determining what to do with the clicked link.

You can use a little CSS to style your telephone link. Let’s see an example where we add color to our link with the CSS color property.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        color: #ff2121;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="tel:+05890000111">0-589-0000111</a>
  </body>
</html>

In our next example, we’ll add a phone character before the telephone number with the CSS ::before pseudo-element and content property.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a[href^="tel:"]:before {
        content: "\260e";
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <a href="tel:+05890000111">0-589-0000111</a>
  </body>
</html>