How to Create Phone Number Links in HTML

Use an HTML anchor with a tel: URI to make a phone number actionable from a web page. Visitors can select the link to open a dialer or another calling handler available on their device; the link does not place a call by itself. This pattern is useful on a contact page when you want visitors to reach a business by phone.

How Phone Number Links Work

A phone link is an anchor element whose href attribute begins with tel: and contains the number to dial. The text between the anchor tags is the visible, selectable label. The destination value and displayed text can be different: one supplies the dialing number, while the other helps visitors recognize the link.

Create a Clickable Phone Link

For example, this inline HTML creates a link labeled “Call customer support”: <a href="tel:+1234567890">Call customer support</a>. Replace +1234567890 with the business number in the appropriate dialing format, and choose link text that describes who or what the visitor will reach.

The following self-contained JavaScript stores that same anchor markup as a string. It is useful if an application needs to assemble the HTML value in code; a regular web page can use the anchor directly.

const phoneLink = '<a href="tel:+1234567890">Call customer support</a>';
console.log(phoneLink);

<a href="tel:+1234567890">Call customer support</a>

Format the Number for Readability and International Dialing

Keep the number in href suitable for the callers you expect and the applicable numbering format. For international callers, include the country calling code when needed to make the destination unambiguous. A country code is not a universal requirement for every audience or numbering context.

The visible label can use familiar spacing, parentheses, or hyphens for readability. For example, the link may display (234) 567-8901 while its href value uses tel:+12345678901. Separators help people scan a number; they are not required in the visible text. Keep the dialable value and the reader-facing presentation clear and consistent.

What Happens When Someone Activates the Link

When a visitor activates a tel: link, the device or browser may open a dialer or another configured calling handler with the number ready to use. The visitor generally chooses whether to place the call. On a desktop computer, a calling application may handle the link if one is configured; otherwise, the behavior depends on the browser and available software. Do not assume every device opens the same interface.

Accessibility and Testing Tips

Use descriptive link text such as “Call customer support” instead of a vague label like “Call” when the destination needs context. This helps people who scan links with assistive technology and visitors viewing the page without surrounding text. Make sure the link is keyboard reachable and its visual styling makes it identifiable as a link.

Check the link on the devices, browsers, and calling applications relevant to your audience. Confirm that the visible number is readable, the href contains the intended number, and activation offers the expected handler. These checks help find formatting mistakes and differences in device behavior before visitors rely on the contact page.

Common Questions About Phone Number Links

Can the displayed number include parentheses or hyphens?

Yes. Use familiar separators in the visible text if they make the number easier to read. Keep the tel: destination appropriate for dialing; do not rely on the visible text to set the destination.

Do phone links work on desktop browsers?

They can, when the browser or operating system has a calling handler configured. Without one, a desktop may not offer a useful action, so check the environments your visitors use.

What should I check if the link does not work?

Review the anchor spelling, the tel: prefix, and the number in href. Then activate the link on a relevant device and check whether a dialer or calling application is available. Behavior can vary with device settings and software.

Should every phone link include a country calling code?

Use a country calling code when it is needed for the callers and numbering context you serve, especially when people may call from another country. Local dialing conventions differ, so choose a format that makes the intended destination clear.