Simple HTML - Click To Call (tel: schema) 🖱️📞
Tags: html, beginners, codenewbie, webdev
Published: 2020-02-10 18:45:49

---
title: Simple HTML - Click To Call (tel: schema) 🖱️📞
published: true
description: Article explaining how to get Click to Call working using the HTML tel: schema. Make your website more accessible and implement this 5 seconds fix to all telephone numbers on your website. Stop users being frustrated when trying to contact you via phone.
tags:  html,beginners,codenewbie,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/h87hf0pc6j2ftx2yuy9e.jpg
---

Make your website even more accessible when dealing with telephone numbers by allowing the user to click your number to make a call.

TL;DR

* Wrap the telephone number in an anchor tag `<a></a>`
* Prefix the telephone number in the `href` attribute with the `tel:` schema
* Make sure the telephone number uses the <a href="https://en.wikipedia.org/wiki/National_conventions_for_writing_telephone_numbers">international dialling format</a>

**Note:** This takes seconds to implement, so there's no excuse not to do it!

# Problem

You want to talk with a real human to discuss a problem and you visit the website's **"Contact Us"** page to get the telephone number, you now have to copy the number from the website into your phone and then press the dial button. 

**Arrrrgggh**, it shouldn't be this hard!

Those websites not in the know have the telephone number contained in the following <abbr title="HyperText Markup Language">HTML</abbr> markup.

```html
<span>+44 (0)20 7946 0123</span>
```

**Note:** The number above is a fictitious, so it'll fail to connect. Fictitious numbers are used in movies, television programs, etc. You can find out more about <a href="https://en.wikipedia.org/wiki/Fictitious_telephone_number">fictitious numbers on Wikipedia</a>.

# Solution (tel: Schema)

What is the `tel:` schema, its a <abbr title="Uniform Resource Identifier">URI</abbr> schema for telephone numbers. Browsers are able to parse these values and understand that they should be treated as a telephone number.  

HTML has built-in support for **Click to Call**, by wrapping the telephone number in an anchor link and using the `tel:` schema. E.g.

```html
<a href="tel:+44-207-946-0123" title="Click to Call">+44 (0)20 7946 0123</a>
```

**Note:** Be a good citizen and use the international telephone dialling format to make sure the call is always connected, irrespective of where the caller is located.

There's no excuse not to implement this **5 seconds fix**, we owe it to our users.✅

## What Happens

Depending on whether you visit the website with a mobile device or desktop changes the behaviour of the link.

### Mobile Devices

Pressing the telephone number will now open the device's default dialler app with the telephone number already inserted, user only has to press the dial button.

![Click To Call On Android Phone](https://dev-to-uploads.s3.amazonaws.com/i/q5i76gbug5fod9zc7whf.gif)
<figcaption>Click To Call On Android Phone</figcaption>

### Desktop

This will depend on the browser used to navigate the website, but most modern browsers will prompt the user to make a call using their phone or pick an application.

![Google Chrome Make A Call Prompt](https://dev-to-uploads.s3.amazonaws.com/i/jv19v7wj09oq93om1u09.png)
<figcaption>Google Chrome Make A Call Prompt</figcaption>

## Try It Out

Below is an example of how the telephone number will appear when visiting the website. Again this is a fictitious number so the call won't be connected, but should allow you to view the <abbr title="User Experience">UX</abbr>.

<a href="tel:+44-207-946-0123" title="Click to Call">+44 (0)20 7946 0123</a>

# Credits

**Cover Image:** Photo by <a href="https://unsplash.com/@jamessutton_photography">James Sutton</a> on Unsplash