Issue #9 - the mailto: URI scheme

You can pre-fill header fields and the message body, when you link to e-mail addresses.

<a href="mailto:manuel@matuzo.at?subject=HTMHell%20issue%209%20was%20fantastic&body=Thanks,%0D%0AManuel!">
manuel@matuzo.at
</a>
When you click this link, your default e-mail browser should open a new e-mail window with the subject “HTMHell issue 9 was fantastic” and the message “Thanks, Manuel”.

manuel@matuzo.at

When linking to e-mail addresses, you can provide the subject, recipients, and the e-mail body. You do this by writing the e-mail address followed by a ?, the header name, =, and the header value (see example above).

Recipients

There are different ways to link to no, one or multiple e-mail address(es).

mailto: only

If you don't provide a value for mailto:, your default e-mail client opens a new e-mail window with all fields empty.

<a href="mailto:">
mailto: only
</a>

mailto: only

mailto: only, with single address

The “To:” field filled with a single e-mail address.

<a href="mailto:manuel@matuzo.at">
mailto: only, with single address
</a>

mailto: only, with single address

mailto: only, with multiple addresses

Separate multiple recipients with a , (comma) and no space between.

<a href="mailto:manuel@matuzo.at,manuel@webclerks.at">
mailto: only, with multiple addresses
</a>

mailto: only, with multiple addresses

mailto: + to parameter

You can also define multiple recipients by using the to parameter.

<a href="mailto:manuel@matuzo.at?to=manuel@webclerks.at,info@webclerks.at">
mailto: + to parameter
</a>

mailto: + to parameter

mailto: + cc parameter

The “To:” and “Cc:” field filled with different e-mail addresses.

<p>
<a href="mailto:manuel@matuzo.at?cc=manuel@webclerks.at">
mailto: + cc parameter
</a>
</p>

mailto: + cc parameter

mailto: + bcc parameter

The “To:” and “Bcc:” field filled with different e-mail addresses.

<p>
<a href="mailto:manuel@matuzo.at?bcc=manuel@webclerks.at">
mailto: + bcc parameter
</a>
</p>

mailto: + bcc parameter

Subject

You can define a subject by using the subject parameter. Special characters and spaces must be url encoded.

<p>
<a href="mailto:manuel@matuzo.at?subject=This%20is%20a%20subject">
mailto: + subject parameter
</a>
</p>

mailto: + subject parameter

Body

You can define a message body by using the body parameter.

<p>
<a href="mailto:manuel@matuzo.at?body=Hi!">
mailto: + body parameter
</a>
</p>

mailto: + body parameter

Special characters, line breaks and spaces must be url encoded

<p>
<a href="mailto:manuel@matuzo.at?body=Hi!%0D%0A%0D%0ATom%20%26%20Jerry%20are%20the%20best!">
mailto: + body parameter
</a>
</p>

mailto: + body parameter with special characters and line breaks

It's not possible to add HTML to the message, it's plain text only.

Additional considerdations

  • Spaces must be encoded with %20.
  • Line breaks must be encoded with %0D%0A.
  • To avoid interoperability problems, the same header value shouldn't be used multiple times (e.g. ?to=a@b.at?to=b@c.at)

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.