HTML email links allow users to create a clickable link that can open their default email application and start composing a new email. They are commonly used on contact pages, business websites, portfolios, blogs, and support pages.

HTML email links are created using the <a> element with the mailto: scheme in the href attribute.

If you are new to HTML links, first learn about HTML Links and HTML Link Syntax.

What Is an HTML Email Link?

An HTML email link is a hyperlink that uses mailto: instead of a normal webpage URL.

Syntax

<a href="mailto:email@example.com">Send Email</a>

When a user clicks the link, the browser attempts to open the user’s default email application.

For example:

<a href="mailto:hello@example.com">
    Email Us
</a>

The text Email Us becomes clickable.

Using the mailto: Scheme

The mailto: scheme tells the browser that the destination is an email address.

<a href="mailto:support@example.com">
    Contact Support
</a>

Unlike an HTTP or HTTPS URL, the destination here is an email address rather than a webpage.

The browser may open applications such as Outlook, Apple Mail, or another email client configured on the user’s device.

Adding a Subject

You can automatically add a subject to the email by using the subject parameter.

<a href="mailto:support@example.com?subject=Website%20Support">
    Contact Support
</a>

The %20 represents a space in a URL.

When the email application opens, the subject field can be populated with Website Support.

Adding Email Body Text

You can also provide default text for the email body using the body parameter.

<a href="mailto:support@example.com?subject=Support%20Request&body=Hello%2C%20I%20need%20help.">
    Send Support Request
</a>

When the email application opens, the subject and body can be filled automatically.

Using Multiple Parameters

You can combine subject, body, and other email fields.

<a href="mailto:hello@example.com?subject=Contact%20Request&body=Hello%2C%20I%20would%20like%20more%20information.">
    Contact Us
</a>

Use & to separate multiple parameters.

Remember that spaces and certain special characters need URL encoding.

Adding CC and BCC

You can also specify additional recipients using cc and bcc.

CC Example

<a href="mailto:hello@example.com?cc=manager@example.com">
    Send Email
</a>

BCC Example

<a href="mailto:hello@example.com?bcc=admin@example.com">
    Send Email
</a>

Multiple parameters can be combined:

<a href="mailto:hello@example.com?cc=manager@example.com&subject=Meeting">
    Email Us
</a>

Styling Email Links with CSS

Email links can be styled like other HTML links.

<style>
a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
</style>

<a href="mailto:hello@example.com">
    Email Us
</a>

CSS can improve the appearance of links while keeping their HTML functionality unchanged.

You can learn more about styling HTML content in HTML Styles.

Email Links on Contact Pages

Email links are particularly useful on contact pages.

<h2>Contact Us</h2>

<p>
    Have a question?
    <a href="mailto:hello@example.com">
        Send us an email
    </a>.
</p>

This gives visitors a simple way to contact the website owner.

Email Links vs Normal Links

A normal HTML link usually points to a webpage:

<a href="https://example.com">Visit Website</a>

An email link points to an email address:

<a href="mailto:hello@example.com">Send Email</a>

You can also learn about other link types in HTML Relative URLs and HTML Absolute URLs.

Best Practices for HTML Email Links

Use clear and descriptive text such as Email Support, Contact Us, or Send an Email instead of vague text such as “Click Here.”

Keep the email address accurate and test the link before publishing your webpage. Remember that mailto: links depend on the user’s device and email application settings.

HTML email links provide a simple way to connect website visitors with an email address and are especially useful for contact, support, and business communication pages.