How to Add a Mailto Link in HTML (The Ultimate Guide)

Adding a clickable email link to your website is one of the most fundamental skills in HTML. Whether you’re building a personal portfolio, a business landing page, or a complex web application, the humble mailto link remains the standard way to let users contact you.

In this guide, we’ll cover everything you need to know about creating mailto links, from the basic syntax to advanced parameters.

The Basic Syntax

The simplest form of a mailto link looks like this:

<a href="mailto:[email protected]">Send Email</a>

When a user clicks this link, their default email client (like Outlook, Gmail, or Apple Mail) will open with a new message addressed to [email protected].

Breakdown:

• <a>: The anchor tag used for links.
• href: The attribute that specifies the destination.
• mailto:: The protocol that tells the browser this is an email link, not a web page.
• [email protected]: The recipient’s email address.

Learn more: The mailto URI scheme is formally defined in RFC 6068 by the Internet Engineering Task Force (IETF).

Adding a Subject Line

You can pre-fill the subject line of the email to help you organize incoming messages. This is done by adding a subject parameter.

<a href="mailto:[email protected]?subject=Hello%20There">Contact Us</a>

Note: We use %20 instead of spaces. This is called URL encoding (percent-encoding). While modern browsers often handle spaces automatically, it’s best practice to encode them to ensure compatibility.

Adding Body Text

Want to start the user off with a template? You can add body text using the body parameter.

<a href="mailto:[email protected]?body=Hi%2C%20I%20would%20like%20to%20inquire%20about...">
  Inquire Now
</a>

Handling Line Breaks

To add a line break in the body, use %0A.

<a href="mailto:[email protected]?body=Line%201%0ALine%202">
  Email with Line Breaks
</a>

CC and BCC (Carbon Copy & Blind Carbon Copy)

You can also specify additional recipients.

• CC (Carbon Copy): Visible to all recipients.
• BCC (Blind Carbon Copy): Invisible to other recipients.

<a href="mailto:[email protected][email protected]&[email protected]">
  Email Team
</a>

Combining Parameters

You can combine multiple parameters using the ampersand & symbol. The first parameter always starts with ?, and subsequent ones use &.

<a href="mailto:[email protected]?subject=Help&body=I%20need%20help%20with...&[email protected]">
  Contact Support
</a>

Common Mistakes to Avoid

1. Forgetting to Encode Special Characters:

   • Space becomes %20
   • Line break becomes %0A
   • & becomes %26

   If you don’t encode these, your link might break or cut off text.

2. Using mailto for Forms:

   • Don’t use <form action="mailto:...">. It’s unreliable and often fails to send data correctly. Read more about why this is a bad practice.

3. Assuming Everyone Has an Email Client:

   • Some users (especially on public computers) might not have a default email client configured. It’s good practice to display the email address visibly so they can copy-paste it if needed.

   <!-- Good Practice -->
   <a href="mailto:[email protected]">[email protected]</a>

4. Ignoring Character Limits:

   • Different email clients have different URL length limitations. Learn about client-specific quirks to ensure compatibility.

Conclusion

Creating mailto links is simple, but mastering the parameters allows you to create a much better user experience. By pre-filling the subject and body, you save your users time and ensure you get the information you need.

Want to generate complex mailto links without memorizing the codes? Try our free Mailto Link Generator!

Related Resources:

• Mailto Link Generators vs. Manual Coding
• Browse All Articles
• Cheatsheets & Resources