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.
- Only fill up receiver (To) email address
- Insert subject line and To address
- 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:
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:
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.
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.
Complete HTML Tutorial (Index)
- Chapter 1: Creating a Simple Webpage
- Chapter 2: Using Formatting Tags
- Chapter 3: Creating Listed Content
- Chapter 4: Creating and Customizing Tables
- Chapter 5: Linking Text
- Chapter 6: Email Links
- Chapter 7: Image Maps
- Chapter 8: Using Images in HTML
- Chapter 9 : Creating HTML Forms
- Chapter 10: HTML Frames
- Chapter 11: Embedding Media in HTML5
- Chapter 12: HTML5 Tag Reference
How do I add multiple email address in the To: section of the email. It seems I can only add one email on either To: Cc: and Bcc: