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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass) 

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

Result

0-589-0000111

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. Also note that we included the exact telephone number inside the href attribute, but the number shown to the user is the one between the a tags. So we can show numbers in any form/style, and also we can use white-space between the digits

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>