Исполняемые доки HTML: Ссылка mailto

Q: Как сделать ссылку на email в HTML?

Используйте ссылку, у которой href начинается с mailto: и адреса: hello@example.com . Клик по ней открывает новое письмо в почтовой программе читателя по умолчанию.

Q: Как добавить тему письма в ссылку mailto?

Добавьте ее параметром запроса после ?: mailto:hello@example.com?subject=Order%20question. Кодируйте пробелы как %20, а остальные параметры соединяйте через &, например ?subject=Hi&body=Hello.

Q: Как отправить ссылку mailto нескольким получателям?

Разделите адреса запятыми: mailto:ana@example.com,bob@example.com. Для копий используйте параметры cc= и bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: Как сделать номер телефона кликабельным в HTML?

Используйте ссылку tel: с номером в международном формате: +1 555 123 4567 . На телефонах она начинает звонок, на компьютере открывает установленное приложение для звонков, если оно есть.

Как сделать ссылку на почту

Начните href ссылки с mailto: и адреса. Клик по ней открывает в почтовой программе читателя новое письмо на этот адрес.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

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

Используйте сам адрес как текст ссылки. Читатель без настроенной почтовой программы (частая ситуация на компьютерах, где почтой пользуются в браузере) все равно сможет его скопировать, а ссылка с текстом только «Напишите нам» оставит его ни с чем.

Тема, текст, копия и скрытая копия

Ссылка mailto может заполнить и другие части письма. Добавьте параметры после ? и соедините их через &, как в строке запроса URL:

Параметр	Что заполняет	Пример
`subject`	Тему письма	`?subject=Order%20question`
`body`	Текст письма	`&body=Hi%20there`
`cc`	Получателей копии	`&cc=sales@example.com`
`bcc`	Получателей скрытой копии	`&bcc=log@example.com`

Несколько получателей записывают в части с адресом через запятую: mailto:ana@example.com,bob@example.com.

Значения должны быть закодированы для URL: пробел это %20, перенос строки %0D%0A, & это %26, а ? это %3F. Скрипт в этом примере декодирует каждую ссылку, чтобы было видно, что получит почтовая программа:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

Тему Order #123 нужно записать как Order%20%23123: голый # оборвал бы URL на этом месте, и текст письма потерялся бы. Не используйте и + вместо пробела. В ссылке mailto + это буквальный знак плюса, и многие почтовые программы так его и показывают.

Ссылка mailto через JavaScript

Кодировать вручную легко с ошибками. encodeURIComponent сделает это за вас. Заполните поля, и ссылка ниже обновится:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent превращает & в %26, а перенос строки в %0A; replace делает из переносов строк пару %0D%0A, которую ожидает электронная почта. Часть с адресом оставьте как есть: @ и , там допустимы без кодирования.

Ссылки на телефон через tel: и sms:

tel: создает ссылку для звонка по клику. Пишите в href номер с кодом страны и без пробелов; видимый текст можно оформить как угодно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 работает из любой страны. Местный номер вроде tel:02079460958 работает только для звонящих из этой страны.
Дефисы допустимы как разделители (tel:+1-555-123-4567); пробелы в формат не входят, поэтому в href их не пишите.
sms: открывает приложение сообщений. Текст сообщения через ?body= работает во многих приложениях, но поддержка различается, поэтому не полагайтесь на него.
На компьютере tel: открывает приложение для звонков, если оно установлено (например, FaceTime или софтфон), а иначе ничего не делает.

Safari на iPhone сам превращает номера телефонов в обычном тексте в ссылки. Если это что-то ломает, например номер заказа, отключите это через <meta name="format-detection" content="telephone=no">.

Спам и адреса электронной почты

Адрес в ссылке mailto может прочитать любой бот, скачавший страницу. Уловки вроде записи hello [at] example [dot] com или сборки адреса через JavaScript останавливают некоторые простые сборщики, но и ссылкой становится сложнее пользоваться. Контактная форма, о которой рассказывает страница формы в HTML, вообще убирает адрес со страницы. Для большинства сайтов проще хороший спам-фильтр в почтовом ящике.

Избегайте <form action="mailto:...">. Такая форма зависит от почтовой программы читателя, отправляет поля закодированными для URL и трудночитаемыми и не дает вам никакого подтверждения, что что-то отправлено.

Частые ошибки

Забытый mailto:. href="hello@example.com" это относительная ссылка на страницу, названную по адресу.
Незакодированные пробелы или # в теме или тексте. Кодируйте значения через %20, %23 или encodeURIComponent.
+ вместо пробелов. Он отображается как знак плюса.
Второй ? вместо &. Только первый параметр идет после ?; остальные соединяются через &.
«Напишите нам» как единственный текст, так что пользователям веб-почты нечего скопировать.
Местные номера в tel:. Указывайте код страны.

Часто задаваемые вопросы

Как сделать ссылку на email в HTML?

Используйте ссылку, у которой href начинается с mailto: и адреса: <a href="mailto:hello@example.com">hello@example.com</a>. Клик по ней открывает новое письмо в почтовой программе читателя по умолчанию.

Как добавить тему письма в ссылку mailto?

Добавьте ее параметром запроса после ?: mailto:hello@example.com?subject=Order%20question. Кодируйте пробелы как %20, а остальные параметры соединяйте через &, например ?subject=Hi&body=Hello.

Как отправить ссылку mailto нескольким получателям?

Разделите адреса запятыми: mailto:ana@example.com,bob@example.com. Для копий используйте параметры cc= и bcc=: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Как сделать номер телефона кликабельным в HTML?

Используйте ссылку tel: с номером в международном формате: <a href="tel:+15551234567">+1 555 123 4567</a>. На телефонах она начинает звонок, на компьютере открывает установленное приложение для звонков, если оно есть.

Почему ссылка mailto ничего не делает?

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

Связанные концепции

Ссылка mailto в HTML: тема, текст письма, копия и tel