How to create phone link in html

HtmlHow-ToBeginner · 3 min read

How to Create a Phone Link in HTML Easily

To create a phone link in HTML, use the <a> tag with the href attribute set to tel: followed by the phone number. For example, <a href="tel:+1234567890">Call Us</a> creates a clickable link that opens the phone dialer.

📐

Syntax

The phone link uses the anchor tag <a> with the href attribute starting with tel:. This tells the browser to open the phone dialer with the given number.

<a>: The clickable link element.
href="tel:number": The phone number to call, prefixed by tel:.
Link text: The visible text users click on.

html

<a href="tel:+1234567890">Call +1 234 567 890</a>

Output

Call +1 234 567 890

💻

Example

This example shows a simple phone link that users can click to call the number on devices that support calling, like smartphones.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phone Link Example</title>
</head>
<body>
  <p>Contact us by phone:</p>
  <a href="tel:+18005551234">Call 1-800-555-1234</a>
</body>
</html>

Output

⚠️

Common Pitfalls

Some common mistakes when creating phone links include:

Not including the tel: prefix, which makes the link not work as a phone link.
Using spaces or special characters in the phone number without encoding, which can cause errors.
Not using an international format (like +countrycode) which can confuse some devices.

Always use digits only, optionally with plus sign for country code, and no spaces inside the href.

html

<!-- Wrong way: missing tel: prefix -->
<a href="1234567890">Call us</a>

<!-- Right way: with tel: prefix -->
<a href="tel:1234567890">Call us</a>

📊

Quick Reference

Part	Description	Example
`<a>`	Anchor tag for links	`<a href=...>Call</a>`
`href="tel:number"`	Phone link with number	`href="tel:+1234567890"`
Phone number format	Digits only, optional + for country code	`+1234567890`
Link text	Visible clickable text	Call us

✅

Key Takeaways

Use href="tel:number" in an <a> tag to create a phone link.

Always include the tel: prefix before the phone number.

Use digits only and include the country code with a plus sign for best compatibility.

Avoid spaces or special characters inside the href attribute.

Test phone links on actual devices like smartphones to ensure they work.