HTML Email Links allow users to click and open their default email application to send a message directly.
This is done using themailto:protocol inside the<a>(anchor) tag.
Basic Email Link
<a href="mailto:contact@html5andcss3.org">Send Email</a>- Clicking the link opens the default email client with the To: field pre-filled.
- The text between
<a>and</a>becomes clickable.
Adding Subject and Body
You can include a subject, body, CC, and BCC directly in the email link using query parameters.
<a href="mailto:contact@html5andcss3.org?subject=Website%20Inquiry&body=Hello,%20I%20want%20to%20know%20more%20about%20your%20services.">Send Email</a>%20represents a space in URLs.- Opens the email client with subject and pre-written body.
CC and BCC Fields
You can also include CC (carbon copy) and BCC (blind carbon copy) recipients:
<a href="mailto:contact@html5andcss3.org?cc=support@example.com&bcc=admin@example.com&subject=Feedback">Send Feedback</a>Clicking this link automatically populates To, CC, BCC, and Subject fields.
Webmail Clients (like Gmail)
You can create a link that opens Gmail compose window:
<a href="https://mail.google.com/mail/?view=cm&to=contact@html5andcss3.org" target="_blank">
Send Email
</a>Best Practices
- The Email link will only work, when you have default email client is setup in your system.
- Keep the link text descriptive:
Contact Supportinstead ofClick Here. - Avoid putting sensitive information in the body.
- Test links across different email clients to ensure compatibility.
Conclusion
HTML Email Links (mailto:) provide a fast and convenient way for visitors to contact you directly from your website.
By adding subject, body, CC, and BCC, you can streamline communication and improve user experience.