Как сделать ссылку на телефон в html

Для указания ссылки на телефон используется тег <a> с привычным атрибутом href и ключевым словом tel. После ключевого слово ставится двоеточие и указывается телефон в необходимом формате.

<a href="tel:+79991112233">Позвоните нам для консультации</a>

Да

Ссылку на телефон делают тегом <a> с адресом tel: и номером в международном формате:

<a href="tel:+78001234567">8 800 123-45-67</a>

На телефоне по нажатию откроется набор номера. В href пишите номер без пробелов, скобок и дефисов, с + и кодом страны. Текст ссылки оформляйте как удобно читать.

Почему с +7

Номер tel:88001234567 не сработает при звонке из другой страны или с некоторых SIM-карт. Международный формат +7 работает везде.

Добавочный номер

<a href="tel:+74951234567,123">+7 495 123-45-67, доб. 123</a>

Запятая — пауза перед набором добавочного.

Другие ссылки

<a href="mailto:hello@example.com">hello@example.com</a>
<a href="sms:+79001234567">Написать SMS</a>
<a href="https://wa.me/79001234567">WhatsApp</a>
<a href="https://t.me/username">Telegram</a>

В ссылке на WhatsApp номер пишут без +.

На компьютере

На компьютере tel: откроет приложение для звонков, если оно есть: FaceTime, Skype или телефон, связанный с компьютером. Если такого приложения нет, ничего не произойдёт. Поэтому номер стоит показывать текстом, чтобы его можно было скопировать.

Стиль ссылки

a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
  white-space: nowrap; /* номер не переносится на две строки */
}

Safari на iPhone сам превращает номера в тексте в ссылки и красит их в синий. Отключить это можно метатегом <meta name="format-detection" content="telephone=no">.

HTML-разметку разбирают в бесплатном курсе «Основы веб-разработки».