Written by: Geoffrey Callaghan

A Complete Guide To HTML Mailto Attribute

A Complete Guide To HTML Mailto Attribute

The mailto attribute in HTML is used to create hyperlinks that open the user’s default email client with a new email message. When a user clicks on a mailto link, it launches their email application and populates the To, CC, BCC, Subject, and Body fields of the new email. Here’s a comprehensive guide to using the mailto attribute:

Basic Syntax:

<a href="mailto:recipient@example.com">Send Email</a>

Components of the mailto URL:

  1. Recipient (To):

    • Use the to parameter to specify the email address of the recipient.
    <a href="mailto:recipient@example.com">Send Email</a>
  2. Subject:

    • Use the subject parameter to set the email subject.
    <a href="mailto:recipient@example.com?subject=Subject%20Text">Send Email</a>
  3. CC (Carbon Copy):

    • Use the cc parameter to specify email addresses for carbon copy recipients.
    <a href="mailto:recipient@example.com?cc=cc1@example.com,cc2@example.com">Send Email</a>
  4. BCC (Blind Carbon Copy):

    • Use the bcc parameter to specify email addresses for blind carbon copy recipients.
    <a href="mailto:recipient@example.com?bcc=bcc1@example.com,bcc2@example.com">Send Email</a>
  5. Body (Message):

    • Use the body parameter to pre-fill the email body.
    <a href="mailto:recipient@example.com?subject=Subject%20Text&body=Message%20Text">Send Email</a>
  6. Multiple Parameters:

    • Combine multiple parameters by separating them with an ampersand (&).
    <a href="mailto:recipient@example.com?subject=Subject%20Text&cc=cc1@example.com&body=Message%20Text">Send Email</a>

Encoding Special Characters:

  • Spaces and special characters should be URL-encoded. For example, space is represented as %20.

Example with all parameters:

<a href="mailto:recipient@example.com?subject=Subject%20Text&cc=cc1@example.com&bcc=bcc1@example.com&body=Message%20Text">Send Email</a>

Notes:

  • Some users may have web-based email clients, so the behavior might vary.
  • The user’s default email client must be set up for this to work.

Best Practices:

  • Keep the email link simple for better user experience.
  • Encourage users to use a proper email address in the to parameter.
  • Avoid pre-filling sensitive information in the email body for security reasons.

In summary, the mailto attribute is a useful tool for creating email links in HTML, allowing you to pre-define various parameters to streamline the email creation process for users.

Warning

mailto attributes in HTML are vulnerable to scraping due to plain text exposure in the HTML source.

You can use VeilMail.io to hide email address with captcha. VeilMail makes sure it’s a human reading your email address and not a bot or a email scraper.