How to Create HTML Email Links with Subject, CC and BCC?

In our earlier article we have explained how to use text hyperlinks in HTML. Another use of HTML hyperlink is to create an email link. When users click on an email link, it will open a new email with the default email client on your computer. It could be Office Outlook in Windows or Mail app in macOS. In this tutorial, we will explain how to create HTML email links with examples.

Using Email Links in HTML

When you write an email, you have to fill up receiver email address, subject, CC and BCC. In general, except receiver email address all other fields are optional. In this tutorial, we will cover the following scenarios to trigger email using HTML hyperlink.

1. Only fill up receiver (To) email address
2. Insert subject line and To address
3. Fill up CC, BCC, To address and subject line

1. Fill Up To Address with HTML Email Hyperlink

You can use the “mailto:email_id” hyperlink reference element within the anchor <a> tag to create an email link. Below is an example for that:

<a href="mailto:[email protected]">Contact Us</a>

It will look like below on your webpage:

Contact Us

Clicking on the link will open the new email window using default email client configured on your computer. Generally the email client will be Microsoft Outlook on Windows based PCs and Mail App on Mac. The “To” address filed will be pre-filled with the email id from “mailto:” attribute.

2. Email Link with Subject

The above example is a simple one that only fills the “To” field in the new email. What about inserting a subject line also in the email hyperlink? You can easily add a subject to your email by using the below HTML code.

<a href="mailto:[email protected]?Subject=Thanks%20for%20tutorials" target="_blank">
Contact Us</a>

The result on the browser will look similar to normal email link like below:

Contact Us

When you click on the link, you will see new email is opened with subject line.

3. Email link with CC and BCC

Now that, HTML5 even allows you to insert Carbon Copy (CC) and Blind Carbon Copy (BCC) fields when opening the new email. Use the below code, if you want to create an email link with CC and BCC attributes within “href”.

<a href="mailto:[email protected][email protected]&[email protected]&Subject= Thanks%20for%20tutorials" target="_blank">Contact Us</a>

It will look similar to normal email link on the browser.

Contact Us

Clicking on the link will open the email with CC and BCC filled.

Note: %20 is used to replace the empty spaces, so that browsers can interpret it as a space when opening an email client.

Using Emails in a Web Page

Now that you know how to use email links!!! But the question is – is it safe to use emails on web pages? The answer is – No, it is not safe. The “mailto:” attribute will reveal the email ids to automated bots and users. Hence, avoid using direct email links in your web pages as explained above.

There are plenty of bad automated bots crawl and index the web content for illegal uses. These bots will get your email id and start sending spam emails. In order to avoid the spamming issue HTML forms can be used with human verification like CAPTCHA code.

---