HTML Email Links

Understanding HTML Email Links

HTML email links use the mailto: URL scheme to open a new email message in the visitor's configured email application or mail handler.

Email links are created with the <a> element and can include a recipient address as well as optional information such as a subject line and message text.

Email Link Syntax

A basic email link places mailto: before an email address in the href attribute.

<a href="mailto:name@example-web.site">Send Email</a>

When the link is selected, the browser asks the configured email handler to create a new message addressed to name@example-web.site.

The mailto: Scheme

The mailto: scheme identifies the link as an email action rather than a normal webpage address.

mailto:name@example-web.site

The email address immediately following mailto: becomes the recipient of the new message. Selecting the link does not automatically send an email; it only prepares a message in the visitor's email application or configured mail service.

Adding a Subject Line

A question mark can be added after the email address to begin optional email parameters. The subject parameter can provide a suggested subject line.

<a href="mailto:name@example-web.site?subject=Website%20Question">Ask a Question</a>

In this example, the email application opens a new message with Website Question already entered as the subject.

Adding Message Text

The body parameter can provide text for the message body.

<a href="mailto:name@example-web.site?body=I%20have%20a%20question.">Send a Question</a>

The visitor can edit the suggested message before sending it. Pre-filled text should remain short and useful rather than attempting to create an entire fixed message.

Using Multiple Email Options

Multiple email parameters can be combined in one mailto: URL. The first parameter begins with a question mark, and additional parameters are separated with an ampersand.

<a href="mailto:name@example-web.site?subject=HTML%20Question&body=I%20have%20a%20question%20about%20HTML.">Ask an HTML Question</a>

Because the URL appears inside HTML, the ampersand is written as & in the source code.

URL Encoding Email Links

Spaces and certain other characters should be URL encoded when they appear inside a mailto: URL. A space is commonly represented by %20.

subject=HTML%20Tutorial%20Question

Line breaks can also be encoded when needed. For example, %0A can represent a line feed in message text, although behavior can vary between email applications.

<a href="mailto:name@example-web.site?body=Hello,%0A%0AI%20have%20a%20question.">Send Email</a>

HTML Email Link Example

The following example demonstrates a basic email link and another link containing a suggested subject and message.

<h2>Contact by Email</h2>

<p><a href="mailto:name@example-web.site">Send Email</a></p>

<p><a href="mailto:name@example-web.site?subject=HTML%20Question&body=I%20have%20a%20question%20about%20HTML.">Ask an HTML Question</a></p>

Select either link in the editor to see how a mailto: link is handed to the email application or mail service configured on your device.

Email Link Limitations

Email links depend on the visitor having an email application or webmail service configured to handle mailto: links. If no handler is configured, selecting the link may not produce the expected result.

A mailto: link also does not submit information directly to a website or server. When information needs to be collected and processed by a website, an HTML form is generally more appropriate.

Email Link Best Practices

• Use the mailto: scheme when the intended action is to create an email message.
• Use descriptive link text such as Email Customer Support rather than a vague phrase such as Click Here.
• Keep suggested subject lines and message text concise.
• URL encode spaces and other characters when necessary.
• Remember that selecting an email link does not automatically send a message.
• Do not rely on email links when information must be submitted directly to the website.
• Be aware that email addresses displayed in webpage source may be discovered by automated tools and used for unwanted email.

Summary

HTML email links use the mailto: scheme inside the href attribute to prepare a new email message. They can specify a recipient and optionally suggest a subject or message body, but the final message is controlled and sent by the visitor through their configured email application or mail service.