Learn how to create clickable telephone links that allow users to initiate calls directly from their devices, ensuring correct international formatting for maximum compatibility.
What it is
A tel: link is a special URI scheme used in HTML anchors (<a>) to trigger the device's default dialer application. When a user clicks this link on a mobile device or a desktop with VoIP software installed, the phone number is pre-filled in the calling interface. The mental model is simple: treat the phone number as a resource identifier, similar to how http: identifies web pages or mailto: identifies email addresses.
Related terms include "deep linking" (connecting external apps via URLs) and "E.164 format," which is the standard international numbering plan for public telecommunications numbers.
Why it matters
- Conversion Optimization: Reduces friction for users who want to call immediately, especially on mobile devices where typing numbers is cumbersome.
- Accessibility: Screen readers can announce these links clearly, allowing visually impaired users to navigate contact options easily.
- Cross-Platform Consistency: Works seamlessly across iOS, Android, and many desktop environments without requiring JavaScript logic.
- SEO Benefits: Search engines may display click-to-call buttons in search results if structured data matches valid
tel:links.
Syntax or steps
The syntax follows the standard anchor tag structure but uses the tel: protocol followed by the phone number. Crucially, the number must be formatted according to the E.164 standard to ensure global reachability.
- Start with the country code (e.g., +1 for USA/Canada, +44 for UK).
- Remove all spaces, hyphens, parentheses, and dots from the number.
- Ensure the number contains only digits after the plus sign.
- Wrap the formatted string in an
<a>tag withhref="tel:...".
Example
<!-- Correct International Format -->
<p>Call us at:</p>
<a href="tel:+15551234567">(555) 123-4567</a>
<!-- Local Format (Less Reliable Globally) -->
<a href="tel:5551234567">Local Number</a>In the first example, +15551234567 is the machine-readable URI. The text inside the tags, (555) 123-4567, is what the user sees. This separation allows you to display a human-friendly format while providing the browser with a strictly formatted string. The second example lacks the country code, which may fail if the user is roaming or viewing the site from another country.
Common mistakes
- Including Spaces or Hyphens: Writing
href="tel:+1 555-123-4567"often breaks the link on some browsers. Always strip non-digit characters except the leading plus sign. - Omitting the Country Code: Using local formats like
020 7946 0958works domestically but fails internationally. Always use the full international format starting with+. - Using JavaScript for Simple Links: Do not add complex JS event listeners just to handle clicks unless you need analytics tracking. Native
tel:links are faster and more reliable. - Forgetting Mobile Testing: Desktop browsers usually do nothing when clicking
tel:links. Always test on actual mobile devices to verify behavior.
When to use it
Compare tel: links with other contact methods to choose the right tool.
| Method | Best For | Limitation |
|---|---|---|
tel: Link |
Immediate voice calls on mobile devices. | Does nothing on most desktops without VoIP clients. |
mailto: Link |
Non-urgent inquiries or detailed messages. | Requires email client setup; slower response time. |
| Contact Form | Structured data collection and spam protection. | Higher friction; requires server-side processing. |
Use tel: primarily for mobile-first designs or when immediate verbal communication is critical (e.g., emergency services, sales hotlines).
Practice
Guided Exercise: Create an HTML snippet that displays the text "Support Hotline" as a clickable link for the US number 800-555-0199. Ensure the underlying URL is correctly formatted.
Solution Hint: The href should be tel:+18005550199. Remove all dashes and spaces.
Challenge: Add a visible label next to the link indicating that clicking will open the dialer app, using CSS to style the cursor appropriately.
Quick check
Question: Why is it important to remove spaces and hyphens from the phone number within the href attribute?
Answer: Browsers expect a strict URI format. Extra characters like spaces or hyphens can cause parsing errors, preventing the dialer from launching or resulting in an incomplete number being dialed.
Summary
Telephone links provide a seamless way to connect users to voice support by leveraging native device capabilities. By adhering to the E.164 international format and stripping unnecessary punctuation from the href, you ensure reliable performance across diverse platforms and regions.