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

В этой статье я расскажу, как можно сделать ссылку на номер телефона в html. Этот функционал крайне удобен для мобильных пользователей сайта. Им достаточно нажать на номер, чтобы открылось приложение "Телефон" с уже набранным номером.

Синтаксис html ссылки на телефон:

<a href="tel:+0123456789">+0123456789</a>

Параметр "tel:" не прописан в стандарте HTML. Его научились интерпретировать браузеры. Кстати, некоторые из них могут открывать различные приложения. Но как показывает практика, все же самые популярные (Google Chrome, Opera, Firefox) открывают телефон.

Для задания стиля всем ссылкам с опцией "tel:" можно указать через файл со стилями CSS:

a[href^="tel:"] {
color: #5A2;
text-decoration: none;
}

Можно к телефону добавить красивый html-значок телефона (спецсимвол). Для этого нужно прописать следующее

a[href^="tel:"]:before {
content: "\260e"; 
margin-right: 10px;
}
<!-- Или второй вариант с телефоном:-->
a[href^="tel:"]:before {
content: "\2706"; 
margin-right: 10px;
}

Осталось одна небольшая проблема. При таком исполнение ссылка будет также видна и при открытии сайта на компьютере, а нам этого бы не хотелось. Можно воспользоваться скриптом, который решит эту проблему. С помощью такого скрипта ссылка на телефон будет отображаться лишь для мобильных пользователей

<div id="telephone"></div>
<script>
	if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
	{
	document.getElementById("telephone").innerHTML = '<a href="tel: +0123456789">+0123456789</a>';
	} 
else
	{
	document.getElementById("telephone").innerHTML = '(098) 555-44-33';
	}
</script>

Напомним также ссылки на другие важные приложения:

<a href="mailto:poctha@yandex.ru">poctha@yandex.ru</a> html ссылка на почту
<a href="skype: skype_nick">skype_nick</a> html ссылка на скайп
<a href="fax: +0123456789">факс +0123456789</a> html ссылка на факс
<a href="sms: +0123456789">сообщение на +0123456789</a> html ссылка на СМС

← Перейти в каталог html уроков и советов

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