Adding an email link to a web page takes one line of HTML. The mailto: URI scheme tells the browser to open the visitor’s email client with the address pre-filled — no form, no server-side code.
Here is the basic syntax, then the full picture.
The Basic Mailto Link
<a href="mailto:[email protected]">Email us</a>When a visitor clicks that link, their default email client opens a new message with [email protected] in the To field. The link text — “Email us” — is what appears on the page. Replace it with anything that makes sense in context: “Get in touch”, an email address, a name.
Mailto Parameters: Pre-Filling Subject, CC, BCC, and Body
The mailto: scheme accepts optional parameters after the email address. They follow the same key=value format as URL query strings — start with ?, separate each parameter with &.
| Parameter | What it does | Example value |
|---|---|---|
subject |
Pre-fills the message subject line | subject=Project%20enquiry |
cc |
Adds a CC recipient | [email protected] |
bcc |
Adds a BCC recipient (hidden from other recipients) | [email protected] |
body |
Pre-fills the message body text | body=Hello%2C%20I%20have%20a%20question |
Spaces in parameter values must be encoded as %20. Line breaks in the body use %0A. Most modern email clients handle these correctly, though body pre-filling is less consistent across clients than subject pre-filling.
Mailto With Subject and Body: Full Example
<a href="mailto:[email protected]
?subject=Question%20about%20your%20post
&body=Hi%2C%0A%0AI%20was%20reading%20your%20article%20and...">
Ask a question
</a>The URL is broken across lines here for readability — in actual HTML it should be one continuous string inside the href value. The & encoding for & is required inside HTML attributes to keep the markup valid; in plain text or the browser address bar you would write & directly.
A worked example with CC and BCC:
<a href="mailto:[email protected]
[email protected]
&[email protected]
&subject=Support%20request">
Contact support
</a>When to Use a Mailto Link vs. a Contact Form
Mailto links are the right choice when:
- You want zero server-side infrastructure — no form handler, no email service subscription.
- You are writing a personal or small portfolio site where a contact form would be overkill.
- You want to give readers a direct line to a specific person (an author bio, a “pitch me” link).
Contact forms are better when:
- You need to capture structured data (name, company, project type) before reading the message.
- You want to minimise spam — exposed email addresses in HTML are harvested by bots, even with obfuscation.
- You need to handle file attachments or route messages to different team inboxes automatically.
Protecting an Email Address From Spam Bots
A mailto link exposes your email address as plain text in the page HTML. Automated crawlers harvest these. A few practical mitigations:
- HTML entity encoding: Replace each character in the address with its HTML numeric entity (
hellofor “hello”). Browsers render it correctly; basic text scrapers do not decode it. The HTML Entity Encoder tool does this conversion for you. - CSS content injection: Put the address in a CSS
contentproperty rather than the DOM. Screen readers handle it but most scrapers do not parse CSS. - JavaScript assembly: Build the
hreffrom concatenated strings in a<script>tag. The address never appears in static HTML.
None of these are foolproof. A determined, JavaScript-capable crawler will still find the address. For a personal blog the entity-encoding approach is usually a sufficient trade-off between effort and protection.
Accessibility and Mailto Links
Screen reader users benefit from clear link text. Avoid using the raw email address as the link text unless the address itself is meaningful in context:
<!-- Avoid: raw address is read out letter-by-letter by some screen readers -->
<a href="mailto:[email protected]">[email protected]</a>
<!-- Better: descriptive text -->
<a href="mailto:[email protected]">Email the author</a>If the raw address is useful for display (so visitors know where the email is going), you can have both:
<a href="mailto:[email protected]">
Email the author ([email protected])
</a>Frequently Asked Questions
Does a mailto link work on mobile?
Yes. On iOS and Android, clicking a mailto link opens the default email app. On desktop, it opens whatever the OS has configured as the default mail client — Outlook, Apple Mail, Thunderbird, or the browser’s own mail handler if one is set. If a visitor has not configured a default mail client, the link may do nothing or show an error. This is the main practical limitation compared to a contact form.
Can I pre-fill multiple CC or BCC recipients?
Yes — separate multiple addresses with commas: [email protected],[email protected]. RFC 6068 (the mailto URI specification) supports this, though a small number of email clients handle it inconsistently.
Does mailto work in all browsers?
The mailto: scheme is part of RFC 6068 and is supported across all browsers. The question is whether the visitor’s system has a default email client configured. Webmail users (Gmail in a browser tab, for example) will typically see nothing happen unless they have set their browser to handle mailto links via Gmail — which is a browser-level setting, not something you control from HTML.
Should I use mailto or a contact form?
For a personal blog, a single author page, or a straightforward “reach out” link in an article, mailto is fine and involves no maintenance. For any site where you need reliable message delivery, spam filtering, structured intake, or confirmation emails, use a contact form with a proper email delivery service behind it.
For more on using HTML elements effectively in blog posts, the HTML for bloggers guide covers links, images, tables, and embeds with copy-paste examples. The full context of where these elements fit into the language is in the HTML basics guide.
