Как использовать ссылки mailto: и tel: — Блог HTML Academy

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

Такие форматы ссылок поддерживаются всеми браузерами, так что вы можете по необходимости использовать их в своих проектах не переживая, что где-то они не сработают.

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto:, после которого указывается адрес почты. Это самый простой вариант.

<a href="mailto:[email protected]">Напишите нам</a>

Текст письма указывается с помощью параметра body

<a href="mailto:[email protected]&body=привет">Напишите нам</a>

За тему письма отвечает параметр subject.

<a href="mailto:[email protected]&body=привет?subject=вопрос">Напишите нам</a>

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc.

<a href="mailto:[email protected]&[email protected]?body=Привет, подпишитесь на рассылку">Напишите нам</a>

Что произойдёт, если кликнуть на ссылку с

mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в >RFC 6068

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^="mailto:"]. ="mailto:"] { font-size: 16px; line-height: 32px; color: #000000; }

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel:.

<a href="tel:+79001111111">+7-900-111-11-11</a>

Хорошим тоном считается указание в href кода страны. При этом в тексте ссылки номер может быть указан в любом удобном формате. Например, добавляем городской номер на сайте фирмы из Санкт-Петербурга:

Хорошо

<a href="tel:+78121111111">(812) 123-45-67</a>

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Питере.

Чуть хуже

<a href="tel:+78121111111">123-45-67</a>

В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.

Плохо

<a href="tel:1234567">123-45-67</a>

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href, должен быть явно виден на странице.

Хорошо

Звоните <a href="tel:+79001111111">8-900-111-11-11</a> по любому поводу. 

Номер видно в тексте ссылки.

Плохо

<a href="tel:+79001111111">Звоните</a> по любому поводу.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства. ="tel:"]:before { content: "\260e"; margin-right: 0.5em; }

Получится такой результат:

Дополнительные материалы по теме

  • RFC 6068 — The ’mailto’ URI Scheme
  • RFC 3966 — The tel URI for Telephone Numbers
  • The Current State of Telephone Links

Ещё о вёрстке

  • Как убрать подчёркивание ссылок
  • Как сделать список без точек в HTML
  • В чём отличие aside и article

Местоположение href Недвижимость

❮ Предыдущая ❮ Ссылка на объект местоположения Далее ❯

Примеры

Получить URL текущей страницы:

let url = location.href;

Попробуйте сами »

Установите URL текущей страницы:

location.href = "https://www.w3schools.com";

Попробуйте сами »

Другие примеры ниже.


Определение и использование

Свойство location.href устанавливает или возвращает полный URL-адрес текущей страницы.


Синтаксис

Возврат свойство Href:

Location.Href

Установите свойство HREF:

Место. Описание

URL-адрес Абсолютный URL-адрес, например:
http://www.example.com/default.htm

Относительный URL-адрес, например
default.htm

URL-адрес привязки, например
location.href="#top"

Новый протокол, например:
ftp://someftpserver.com
mailto:[email protected]
file://host/path/example.txt

Возвращаемое значение

Тип Описание
Строка Полный URL-адрес страницы, включая протокол (например, https://).


Дополнительные примеры

Установите значение href так, чтобы оно указывало на якорь на странице:

location.href = "#top";

Попробуйте сами »

Установите значение href так, чтобы оно указывало на адрес электронной почты (откроется и будет создан новый сообщение электронной почты):

location. href = "mailto:[email protected]";

Попробуйте сами »


Поддержка браузеров

location.href поддерживается во всех браузерах:

Хром Край Фаерфокс
Сафари
Опера ИЭ
Да Да Да Да Да Да

❮ Предыдущий ❮ Ссылка на объект местоположения Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Практическое руководство
Учебное пособие по SQL
Учебник по Python
Учебник по W3.
CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

5 Top3 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM 90 | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.

W3Schools работает на основе W3.CSS.

- JavaScript - Форумы SitePoint

ameerulislam

1

Я только что изучал шаблон и увидел, что в атрибуте href есть пустой javascript:{}. Кажется, это мало что дало. Это просто заполнитель или какой-то комментарий, что эта навигация работает с javascript?
Обратите внимание, что он был обнаружен в vav-ссылках с неупорядоченными списками, как показано ниже.

 
  • Главная <ул>
  • Простой слайдер
  • html">Ползунок на всю ширину экрана
  • PicnicTutorials

    2

    Используется вместо #. Если при нажатии используется #, вы переходите в верхнюю часть окна. JavaScript:; не страдает от этого

    амерулислам

    3

    Эрик Уотсон:

    Используется вместо #. Если при нажатии используется #, вы переходите в верхнюю часть окна. JavaScript:; не страдает от этого

    да вроде ничего не делает.

    Мне было интересно, почему лучше поставить это (javascript: {}) или даже #, чем оставить его пустым? Это просто, чтобы сделать его читаемым?

    ральф

    4

    Удалите его и забудьте, что когда-либо его видели. В любом случае встроенный JS — это мусор, и ему нечего делать вместо правильного URL-адреса.

    фелгалл

    5

    Это даже не правильный встроенный JavaScript. Размещение JavaScript там не дает ему никакого доступа к информации о событии, вызвавшем запуск кода.

    Он также предоставляет неработающую ссылку для всех, у кого не включен JavaScript.

    амируислам

    6

    Спасибо, ребята, но не могли бы вы, ребята, сказать мне, что лучше оставить пустой href или href с # ? Или не важно!?

    ральф

    7

    амерулислам:

    лучше оставить пустой href или href с # ? Или не важно!?

    Если щелкнуть ссылку с пустым href, вы получите сообщение об ошибке, а при нажатии на ссылку с символом # в качестве значения href просто перенесет вас наверх страницы, поэтому последний вариант лучше.

    Редактировать:

    Хм, я думал, что это так, но подумал, что лучше проверить, и это не так — нет сообщения об ошибке, когда href пустой. Но все же…

    … реальный вопрос в том, зачем на вашей странице ссылка на любой из них? Если ссылке некуда идти, она не должна быть ссылкой.

    амируислам

    8

    ральф_м:

    Но главный вопрос в том, зачем на вашей странице ссылка на любой из них? Если ссылке некуда идти, она не должна быть ссылкой.

    Только для временного использования. Для демонстрационных шаблонов. Ты знаешь что.

    ральф

    9

    амерулислам:

    Только для временного использования. Для демонстрационных шаблонов.

    Я всегда использую #, потому что в прошлом у меня были ошибки, когда там ничего не было.

    Вы это знаете.

    Я не знаю, как вы относитесь к дизайну. У многих людей есть hrefs, в которых есть только #, потому что ссылка bahavoir управляется JavaScript. Однако это паршивое кодирование, поскольку эти ссылки бесполезны с выключенным JS, что свидетельствует о плохой методологии кодирования.

    амируислам

    10

    ральф_м:

    Я всегда использую #, потому что в прошлом у меня были ошибки, когда там ничего не было.

    Я не знаю, как вы относитесь к дизайну. У многих людей есть hrefs, в которых есть только #, потому что ссылка bahavoir управляется JavaScript.