The HTML mailto link opens a visitor’s default email client when linked. This type of link makes it quick for a user to contact you over email. You can specify a default subject, CC, BCC, and body with a mailto link.
Sometimes when creating a website for a client, they will want you to include their business information on the site. This often involves adding a way to contact the business on the site.
Most times, in this modern day and age, this will include an email address or phone number of some sort. In this article, we’ll take a look at how to link an email in your HTML. This will let you make sure that the client’s default email client opens with the business email as the addressee.
HTML mailto Links
A HTML mailto link makes it easy for a user to contact you over email. When a mailto link is clicked, the user’s email client opens. A new email is created which is addressed to the email in the mailto link.
The most common way to link an email in HTML is by using an anchor tag that has a href attribute.
The href will point to the email you would like to send the email to.
Here is the syntax for a basic mailto link:
<a href="mailto:insertemailhere@xyz.com">Email</a>
This link will open up a new, blank email, addressed to you, in the users’ email client. But, we can add more information to our mailto link.
The mailto link accepts the following:
- A user’s email.
- Subject field.
- CC emails.
- BCC emails.
- Default body text.
Let’s take a deeper look at how to use an HTML mailto link.
mailto HTML Example
We are building a “Contact Us” page on our website, and we want a link that makes it easy for users to email us. We can implement this link using the HTML mailto email links feature:
<html>
<body>
<div>
<h3>Contact Us!</h3>
<label>Email:</label>
<a href="mailto: insertemailhere@xyz.com" target="_blank">insertemailhere@xyz.com</a>
</div>
</body>
</html>If you would like to add a subject to the email, that can be done as well!
<html>
<body>
<div>
<h3>Contact Us!</h3>
<label>Email:</label>
<a href="mailto: insertemailhere@xyz.com?subject=Mail from xyz.com" target="_blank">insertemailhere@xyz.com</a>
</div>
</body>
</html>Our mailto link is enclosed in the HTML <a> tag above. We can break up the mailto string into three parts:
- The href keyword: mailto:
- The email: insertemailhere@xyz.com
- The subject: ?subject=Mail from xyz.com
We want to add a bit more information to our email. To do so, we’re going to use some more of the mailto link attributes we discussed in the last section.
In the below example, we’re going to set a target email, a CC, a BCC, a subject, and a body:
<html>
<body>
<h3>Contact Us!</h3>
<div>
<label>Email:</label>
<a href="mailto:insertemailhere@xyz.com?cc=insertanotheremail@xyz.com&bcc=insertsecretemail@xyz.com&subject=Mail from xyz.com&body=Dear xyz.com" target="_blank">insertemailhere@xyz.com</a>
</div>
</body>
</html>The string is broken up as so:
- The href keyword: mailto:
- The email: insertemailhere@xyz.com
- The cc: ?cc=insertanotheremail@xyz.com – you can add multiple CC’s as comma separated values
- The bcc: &bcc=insertsecretemail@xyz.com – you can add multiple BCC’s as comma separated values here as well.
- The subject: &subject=Mail from xyz.com
- The body: &body=Body-goes-here
An email with all this information is created and opened in the users’ default mail client.
Conclusion
The HTML mailto link automatically opens a users’ email client when it is clicked. You can populate a mailto link with information like a subject line, body, or CC. A mailto link must include the address to which the email should be sent.
We took a look at how to add a mailto href to an anchor tag. This link means a user can click on an email on a website and it will open their default email client with prefilled data. If you’re comfortable, I would encourage you how to do the same thing but for phone numbers or Google Map directions!
Do you want to learn more about HTML? We’ve got a How to Learn HTML guide for you. This guide contains expert advice on how to learn HTML. You’ll also find a list of top learning resources to help you advance your knowledge.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
