Runnable HTML Docs: Email Links (mailto)

Q: How do I create an email link in HTML?

Use a link whose href starts with mailto: followed by the address: hello@example.com . Clicking it opens a new message in the reader's default mail app.

Q: How do I add a subject to a mailto link?

Add it as a query parameter after ?: mailto:hello@example.com?subject=Order%20question. Encode spaces as %20, and join more parameters with &, for example ?subject=Hi&body=Hello.

Q: How do I send a mailto link to multiple recipients?

Separate the addresses with commas: mailto:ana@example.com,bob@example.com. Use cc= and bcc= parameters for copies: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: How do I make a phone number clickable in HTML?

Use a tel: link with the number in international format: +1 555 123 4567 . On phones it starts a call; on desktop it opens whatever calling app is installed, if any.

How to make an email link

Start the link's href with mailto: and the address. Clicking it opens a new message to that address in the reader's mail app.

<!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>

The preview does not open other apps: clicking one of these links there shows the address it would open. On a real page, the first opens a new email and the second starts a call on a phone.

Use the address itself as the link text. A reader with no mail app set up (common on desktops that use webmail in the browser) can still copy it, and a link that says only "Email us" leaves them stuck.

Subject, body, cc and bcc

A mailto link can fill in more of the message. Add parameters after a ? and join them with &, like a URL query string:

Parameter	Fills in	Example
`subject`	The subject line	`?subject=Order%20question`
`body`	The message text	`&body=Hi%20there`
`cc`	Copy recipients	`&cc=sales@example.com`
`bcc`	Blind copy recipients	`&bcc=log@example.com`

Several recipients go in the address part, separated by commas: mailto:ana@example.com,bob@example.com.

The values must be URL encoded: a space is %20, a line break is %0D%0A, & is %26 and ? is %3F. The script in this example decodes each link so you can see what the mail app receives:

<!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>

The subject Order #123 has to be written Order%20%23123: a bare # would end the URL there, and the body would be lost. Do not use + for spaces either. In a mailto link, + is a literal plus sign, and many mail apps show it as one.

Build a mailto link with JavaScript

Encoding by hand is error prone. encodeURIComponent does it for you. Type in the fields and the link below updates:

<!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 turns & into %26 and a line break into %0A; the replace makes line breaks the %0D%0A pair that email expects. Leave the address part as typed: @ and , are allowed there without encoding.

Phone links with tel: and sms:

tel: makes a click-to-call link. Write the number with the country code and no spaces in the href; the visible text can be formatted however you like.

<!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 works from any country. A local number like tel:02079460958 only works for callers inside that country.
Hyphens are allowed as separators (tel:+1-555-123-4567); spaces are not part of the format, so leave them out of the href.
sms: opens the messaging app. Adding a message with ?body= works in many apps, but support differs, so do not rely on it.
On desktop, tel: opens a calling app if one is installed (such as FaceTime or a softphone), and does nothing otherwise.

Safari on iPhone turns phone numbers in plain text into links by itself. If that breaks something like an order number, turn it off with <meta name="format-detection" content="telephone=no">.

Spam and email addresses

An address in a mailto link is readable by any bot that downloads the page. Tricks like writing hello [at] example [dot] com or assembling the address with JavaScript stop some simple scrapers, but they also make the link harder to use. A contact form, covered in HTML forms, keeps the address out of the page entirely. For most sites, a good spam filter on the inbox is the simpler answer.

Avoid <form action="mailto:...">. It depends on the reader's mail app, sends the fields URL encoded and hard to read, and gives you no confirmation that anything was sent.

Common mistakes

Forgetting mailto:. href="hello@example.com" is a relative link to a page named after the address.
Unencoded spaces or # in the subject or body. Encode values with %20, %23, or encodeURIComponent.
Using + for spaces. It shows up as a plus sign.
A second ? instead of &. Only the first parameter follows ?; the rest are joined with &.
"Email us" as the only text, which leaves webmail users nothing to copy.
Local phone numbers in tel:. Include the country code.

Frequently Asked Questions

How do I create an email link in HTML?

Use a link whose href starts with mailto: followed by the address: <a href="mailto:hello@example.com">hello@example.com</a>. Clicking it opens a new message in the reader's default mail app.

How do I add a subject to a mailto link?

Add it as a query parameter after ?: mailto:hello@example.com?subject=Order%20question. Encode spaces as %20, and join more parameters with &, for example ?subject=Hi&body=Hello.

How do I send a mailto link to multiple recipients?

Separate the addresses with commas: mailto:ana@example.com,bob@example.com. Use cc= and bcc= parameters for copies: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

How do I make a phone number clickable in HTML?

Use a tel: link with the number in international format: <a href="tel:+15551234567">+1 555 123 4567</a>. On phones it starts a call; on desktop it opens whatever calling app is installed, if any.

Why does my mailto link do nothing?

The link only hands the address to the default mail app. If the reader has none set up, which is common on desktops that use webmail, nothing useful happens. Show the address as the link text so it can be copied.

Related concepts