Хочу сайт

Наши Статьи

Делимся своим опытом и размышлениями.

Клікабельний номер телефону на сайті

Як правильно зробити html посилання на номер телефону?

Щоб номер телефону на сайті був клікабельним і при натисканні відкривав застосунок для дзвінка, необхідно обгорнути номер у HTML-тег <a>.

В атрибуті href використовується спеціальний формат: tel:<номер телефону>

tel: — це службове слово, яке повідомляє браузеру, що перед ним саме посилання на номер телефону.

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

 

Форматування номера телефону

Для кращого сприйняття користувачами номер телефону можна відформатувати — додати пробіли, дужки або дефіси.

Важливо: у значенні href номер телефону має бути в міжнародному форматі, без пробілів і сторонніх символів (допускається лише знак +).

 <a href="tel:+380935322800">+38 (093) 53-22-800</a>  

 

Зображення з посиланням на телефон

Як посилання на номер телефону можна використовувати не лише текст, а й інші HTML-елементи, наприклад зображення або іконки. У цьому випадку дзвінок відкриватиметься при кліку на картинку.

 <a href="tel:+380935322800"> <img src="phone.png" alt="Зателефонувати"> </a>  

 

Вимкнення автоматичного розпізнавання номерів

У мобільних пристроях номери телефонів автоматично розпізнаються та перетворюються на посилання, але ця функція не завжди коректно працює і тому її можна вимкнути. Для цього необхідно додати метатег у <head> сторінки та прописати посилання у телефонів вручну. 

 <meta name="format-detection" content="telephone=no">  

 

Стилізація посилань з номерами телефонів

Посилання виду tel: можна стилізувати за допомогою CSS, як і будь-які інші HTML-посилання.

 a[href^="tel:"]{ 
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}  

Другие публикации

Наш блог

10 высокоприбыльных приоритетов редизайна

Здесь приведены 10 интернет-тактик с особенно высокой рентабельностью инвестиций.

9 принципов хорошего дизайна сайта

Как думают пользователи? По сути, привычки пользователей в Интернете ничем не отличаются от привычек покупателей в магазине.

Востребованные digital-профессии

С каждым годом вся наша жизнь все больше и больше переходит в цифровой формат. Безусловно пандемия поспособствовала ускорению перехода всего в цифровую реальность.
Facebook YouTube Instagram Viber Telegram
Please wait