HTML is ages old. It wouldn’t be wrong to say that it is as old as email. Now, if we talk about one of its oldest and most widely used elements, it is “mailto.” This link allows users to easily contact website owners and even others directly from the webpage.
Let’s make things simple for you. Have you ever clicked a link on a webpage saying “email us” or any other phrase that opens the email app, having the address of the recipient already filled in? Yes! This is what is known as an HTML link.
Such links are easy to create and are very helpful. Especially when you are creating your website or a contact page.
In this post, we will go through an easy guide explaining how you can create email links in HTML for effective email marketing. Before we go ahead, let has have a quick introduction to what an email link in HTML is.
What is an Email Link in HTML?
An email link is a hyperlink that, when clicked, opens the user’s default email client with a prefilled email address of the recipient.
This link is created using the “mailto:” protocol in HTML. One can also set a prefilled subject line and body to make it easy for the users. Let us see how we can create such an email link.
Simple Steps to Create Email Links in HTML
To create a “mailto:” link, you need to use the <a> tag with its href attribute. A basic syntax of this link that sends an email once clicked, saying “I want the catalogue”, will appear like this:
<a href=”mailto:example@abc.com”>I want the catalogue</a>
You can drop this code into your HTML, and the link will say “I want the catalogue.” When a user clicks on the link, an email app pop-up will launch with a prefilled “To” field having example@abc.com.
How Does This Link work?
<a> is the standard HTML anchor tag for links.
href=”mailto:example@abc.com” tells the browser that this link should open the email client and start a message to that address.
The text between the tags, “I want the catalogue” is what the visitor will see on the page.
How to Customize the Email Link?
Now, if you are looking to customize your link and want to have a prefilled subject line in the email app popup, or a message body, here’s how you can do it:
<a href=”mailto:example@abc.com?subject=Hello%20There”>Email with Subject</a>
How Does This Work?
The ?subject=Hello%20There part adds a subject line to the email.
Spaces in URLs are replaced by %20, so “Hello There” becomes Hello%20There.
How to Add a Message Body?
<a href=”mailto:example@abc.com?subject=Feedback&body=I%20love%20your%20site!”>Send Feedback</a>
Now, when someone clicks on the link, the subject will be “Feedback” and the message body will be “I love your site.” You can edit this as per your needs.
Here, “&” after the “subject=Feedback” in the syntax combines the message body so that both are prefilled.
How to Encode the HTML Syntax?
It’s important to remember that when adding spaces or special characters to the subject or body, they need to be properly URL-encoded. Here are some common conversions:
- Space → %20
- Line break → %0D%0A
- @ → %40 (though you typically don’t need to encode the @ in an email address)
- & → %26
You can use a free online URL encoder if you’re not sure what something should look like.
What Are the Best Practices of Creating Email Links in HTML?
Creating an email link is easy. But doing it well means thinking through how it will behave and who will use it.
Use Clear, Clickable Text
Don’t just use “Click here.” Be specific. “Email customer support” or “Contact the artist” tells users exactly what will happen.
<a href=”mailto:support@yourcompany.com”>Email Customer Support</a>
Don’t Expose Emails to Bots
One downside to email links is spam. Bots that scrape web pages for email addresses can grab yours and start sending junk. To avoid that, try one of these:
- Use JavaScript to build the email dynamically.
- Replace @ with [at] visually and let users type it in.
- Use a contact form instead.
Here’s an example using basic JavaScript to avoid showing the full email in the source:
<script>
const user = “contact”;
const domain = “example.com”;
document.write(`<a href=”mailto:${user}@${domain}”>Email Me</a>`);
</script>
Test It Across Devices
Some mobile devices don’t handle mailto: links the same way. Most modern phones do fine, but older setups or unique apps might struggle. Always test your links on a few devices if possible.
Real-World Uses
Still not sure where to use email links? Here are a few common places they show up:
- Contact pages – An obvious one. Let visitors reach you directly.
- Resumes or online portfolios – Make it easy for hiring managers to get in touch.
- Customer support pages – Direct users to your support team.
- Newsletters or footers – Give readers a way to reply.
What You Should Avoid?
Forgetting to Encode Spaces
Don’t use raw spaces in your subject or body. It can break the link.
Wrong: <a href=”mailto:test@example.com?subject=Job Inquiry”>Contact Me</a>
Right: <a href=”mailto:test@example.com?subject=Job%20Inquiry”>Contact Me</a>
Relying Too Much on Email Links
Not everyone uses a desktop email client. Some users rely solely on web-based services or don’t have one set as default. For important forms of communication, like support or order inquiries, consider using an embedded form alongside the email link.
Making Email the Only Contact Option
Accessibility matters. Not everyone can or wants to use email. Include alternate contact methods if it makes sense, like a contact form, phone number, or even live chat.
Here is a Quick Cheat Sheet
| Feature | Code Snippet Example |
| Basic Link | <a href=”mailto:me@example.com”>Email Me</a> |
| With Subject Line | <a href=”mailto:me@example.com?subject=Hi”>Say Hi</a> |
| With Body Text | <a href=”mailto:me@example.com?body=Thanks!”>Send Thanks</a> |
| With Subject and Body | <a href=”mailto:me@example.com?subject=Feedback&body=Great%20work!”>Give Feedback</a> |
Wrapping Up
Email links are one of the simplest tools in HTML, but when used correctly, they can help streamline communication and improve user experience.
Whether you’re building your first website or refining a professional contact page, knowing how to create and fine-tune these links is a skill worth having.
