HTML Email Link: How to Write a Mailto Link
To make an email link in HTML, use a normal link with mailto: and the address: <a href="mailto:hello@example.com">Email us</a>. Clicking it opens the reader's email app with a new message to that address. You can also fill in the subject, the body and extra recipients by adding them to the link.
Email links are simple, but they have a few traps: special characters that have to be encoded, readers with no email app set up, and spam bots that collect any address they find. This guide covers all three, with examples you can open and edit in HTMLpad.
The basic email link
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Email link</title></head>
<body>
<p>Questions? <a href="mailto:hello@example.com">Email hello@example.com</a></p>
</body>
</html>Showing the address in the link text, as above, helps readers who use webmail in the browser. If clicking does nothing for them, they can still copy the address.
Add a subject, a body and more recipients
Everything after a question mark becomes part of the new message. Separate each field with &.
| Field | What it does | Example |
|---|---|---|
subject |
Fills in the subject line | ?subject=Price%20question |
body |
Fills in the message | &body=Hello%2C%20I%20would%20like... |
cc |
Adds a copy recipient | &cc=sales@example.com |
bcc |
Adds a hidden recipient | &bcc=archive@example.com |
You can also send to several people at once by separating the addresses with commas: mailto:anna@example.com,ben@example.com. The format is defined in RFC 6068, the mailto URI scheme, which every email app follows.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Email link with subject</title></head>
<body>
<p><a href="mailto:hello@example.com?subject=Question%20about%20pricing&body=Hi%2C%0A%0AI%20would%20like%20to%20know%20more%20about%20your%20plans.%0A%0AThanks">Ask about pricing</a></p>
<p><a href="mailto:support@example.com?cc=team@example.com&subject=Bug%20report">Report a bug</a></p>
</body>
</html>Encode the text properly
Links cannot contain spaces or certain characters as they are. Inside a mailto link:
- a space becomes
%20 - a line break becomes
%0A - a comma becomes
%2C - an ampersand inside the text becomes
%26, because a plain&starts a new field - a question mark inside the text becomes
%3F
If you are writing the link by hand, write the message first, then replace those characters. If a script builds the link, use the browser's encodeURIComponent() function on the subject and the body, which handles every case for you. Some email apps tolerate unencoded spaces, but others cut the subject at the first one, so it is worth doing properly.
Style an email link as a button
An email link is a normal link, so you can style it like any other. A common pattern on landing pages:
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Email button</title>
<style>
.mail-btn { display: inline-block; background: #f25438; color: #151924; padding: .7rem 1.2rem;
border-radius: 8px; font: 600 1rem system-ui, sans-serif; text-decoration: none; }
.mail-btn:hover { background: #e0452b; }
</style></head>
<body>
<a class="mail-btn" href="mailto:hello@example.com?subject=Hello">Write to us</a>
</body>
</html>The HTML button link guide explains this styling in more detail and when a real button is the better element.
When a mailto link is the wrong tool
Mailto links depend on the reader's device. They work smoothly for people who use a mail app on their phone or computer. They work less well for people who only use webmail in the browser, where clicking may open an app they never set up.
Two other problems are worth weighing:
- Spam. Any address written in a page can be harvested by bots. Using a separate address for the website, one you can replace if it starts receiving junk, limits the damage.
- No record. You only know someone wrote if they actually press send. A form on the page captures the message even when the reader has no mail app.
As a rule: a mailto link is fine for a personal page, a portfolio, a report or a one-page site. For a business that depends on inquiries, a form is usually the better choice, and it means your page needs something on a server to receive it. A static page cannot store form data on its own, which is one of the signs I describe in when a single HTML page isn't enough.
Check your link before you publish
Open the page, click the link and look at the new message. Check the address, the subject and that line breaks landed where you wanted. Then copy the link address and paste it into a plain text note: any space or odd character that slipped through will be visible there.
For the general rules of links, including new tabs and links to sections, see HTML link code. For working with the files themselves, see how to edit an HTML file and the guide to opening HTML files.
Frequently asked questions
What is a mailto link?
A link whose address starts with mailto: instead of https://. When clicked, it opens the reader's email app with a new message addressed to the email in the link.
How do I add a subject to an email link?
Add ?subject= after the address, followed by the subject with spaces written as %20. For example, mailto:hello@example.com?subject=Order%20question.
Why does my email link not do anything?
The reader probably has no default email app set up, which is common for people who only use webmail. Showing the address in the link text lets them copy it instead.
Can I send an email directly from an HTML page?
Not with HTML alone. A mailto link only opens the reader's email app. Sending a message from the page itself needs a form connected to a service or a server that sends it.