HTML Email Links: The 'mailto' Protocol
Discover how to create clickable email links that make it easy for users to contact you, right from your webpage.
The Basic 'mailto:' Syntax
The foundation of an email link is the <a> tag, but instead of an `http://` URL, you use the mailto: protocol in the `href` attribute. This tells the browser to open the user's default email client, addressed to the specified email.
Adding Parameters (Subject & Body)
You can pre-fill parts of the email by adding parameters to the link. The first parameter starts with a ? (e.g., ?subject=...). Subsequent parameters are added with an & (e.g., &body=...). This makes it much easier for users to contact you.
Best Practices & Security
While `mailto:` links are convenient, be aware that web crawlers can scrape these email addresses for spam. For critical forms, a server-side contact form is more secure. Always URL-encode special characters (like spaces as %20) in your parameters to ensure they work correctly.
Practice Zone
Interactive Test 1: Assemble the Link
Assemble a complete email link by dragging the parts into the correct order.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Identify the Parts
Rellena los huecos en cada casilla.
<a href="support@corp.comHelp%20Request">...</a>
Practice Example: Code Editor
Write an HTML link that sends an email to "sales@web.com" with the subject "Inquiry" and the link text "Contact Sales".
Advanced `mailto:` Tricks
You've mastered the basics. Now let's explore how to make your `mailto:` links even more powerful and useful for your users.
1. Adding CC and BCC Recipients
You can add carbon copy (`cc`) and blind carbon copy (`bcc`) recipients using the same parameter syntax. This is useful for sending a copy of the user's inquiry to a support team or manager.
<a href="mailto:support@example.com?cc=manager@example.com&bcc=archive@example.com">...</a>2. URL Encoding is Crucial
Email subjects and bodies often contain special characters like spaces, question marks, or ampersands. To prevent the link from breaking, these must be "URL encoded." For example, a space becomes %20, and a line break can be created with %0A.
<a href="...subject=Question%20about%20your%20product">...</a>Practical Takeaway: Mastering `mailto:` parameters and proper encoding allows you to create highly specific and convenient contact points, reducing friction for your users and improving the quality of incoming emails.
`mailto:` Link Glossary
- mailto:
- The protocol prefix used in an `href` attribute to specify that the link should open the user's default email client.
- ?
- The query separator. This character is used after the email address to signal the beginning of parameters.
- subject=
- A parameter used to pre-fill the email's subject line.
- &
- The parameter separator. This character is used to separate multiple parameters (e.g., between `subject` and `body`).
- body=
- A parameter used to pre-fill the main content (body) of the email.
- cc= / bcc=
- Parameters to add "carbon copy" and "blind carbon copy" email recipients.
- %20 / %0A
- Examples of URL encoding.
%20represents a space, and%0Arepresents a new line, ensuring the link is interpreted correctly.