HTML Telephone Links

Understanding HTML Telephone Links

HTML telephone links use the tel: URL scheme to let visitors start a phone call or pass a telephone number to a compatible calling application.

Telephone links are created with the <a> element and are especially useful on smartphones and other devices that can place calls directly.

Telephone Link Syntax

A basic telephone link places tel: before a telephone number in the href attribute.

<a href="tel:+15415551234">Call Us</a>

When the link is selected on a compatible device, the operating system or browser can pass the number to an application capable of placing the call.

The tel: Scheme

The tel: scheme identifies the link destination as a telephone number rather than a webpage address.

tel:+15415551234

Selecting a telephone link does not necessarily place the call immediately. Depending on the device and application, the user may first be asked to confirm the call.

Formatting Telephone Numbers

For the href value, a simple machine-readable telephone number is usually best. The visible link text can be formatted separately to make the number easier for people to read.

<a href="tel:+15415551234">(541) 555-1234</a>

In this example, the displayed number includes familiar punctuation while the tel: value uses a compact international-style number.

International Telephone Numbers

Including the country code makes a telephone link more useful to visitors outside the local calling area. International telephone numbers typically begin with a plus sign followed by the country code.

<a href="tel:+15415551234">+1 541-555-1234</a>

The +1 in this example represents the country calling code for the United States and Canada.

Telephone Link Text

The visible text of a telephone link can display the number itself or describe the action that will occur when the link is selected.

<a href="tel:+15415551234">Call Customer Support</a>

Descriptive text can be useful when the purpose of the number is more important than displaying the number itself. If visitors may need to copy or write down the number, displaying the telephone number is often helpful.

HTML Telephone Link Example

The following example demonstrates a telephone number displayed as a clickable link.

<h2>Contact Us</h2>

<p>Telephone:
  <a href="tel:+15415551234">(541) 555-1234</a>
</p>

On a device with calling support, selecting the number can open the device's phone or calling application.

Telephone Links on Different Devices

Telephone links are most useful on smartphones and other devices that can place calls directly. On a desktop computer, selecting a tel: link may open a calling application if one is installed and configured.

If the device has no application associated with telephone links, the link may not produce a useful action. For that reason, the phone number should usually remain visible as readable text rather than relying only on a phrase such as Call Now.

Telephone Link Best Practices

• Use the tel: scheme when the intended action is to contact a telephone number.
• Use an international-format number in the href value when appropriate.
• Keep the machine-readable number simple and format the visible number separately for readability.
• Use descriptive link text when the purpose of the telephone number needs explanation.
• Display the actual telephone number when visitors may need to copy, save, or dial it manually.
• Remember that telephone-link behavior depends on the visitor's device and installed applications.

Summary

HTML telephone links use the tel: scheme inside the href attribute to provide a telephone number to compatible devices and calling applications. They are especially useful for mobile visitors and should use clear link text and properly formatted telephone numbers.