To link an email address in HTML, you use an anchor tag (<a>) with the href attribute set to mailto: followed by the email address.
Creating a link that opens a user's default email client is a fundamental way to enable direct communication from a webpage. This is achieved using the mailto: URI scheme within the href attribute of an HTML anchor tag.
Basic Email Link
As stated in the reference, you create a mailto link by using an anchor tag with the href attribute and inserting the “mailto” parameter after it. The basic structure looks like this:
<a href="mailto:[email protected]">Email Us</a>When a user clicks the "Email Us" text on your webpage, their email application will open, pre-addressed to [email protected].
Linking to Multiple Email Addresses
The reference also notes that if you want to send an email to more than one address, separate your email address with a comma. This is useful for contacting a team or multiple points of contact simultaneously.
<a href="mailto:[email protected],[email protected],[email protected]">Email the Team</a>Clicking this link will open an email composer with the "To" field populated with all three specified email addresses.
Adding Subject and Body (Optional)
Beyond just the recipient address, you can pre-fill other parts of the email, such as the subject line and the body text, by adding parameters to the mailto: link. You start the parameters with a question mark (?) and separate subsequent parameters with an ampersand (&).
- Subject: Use
?subject=Your Subject Here - Body: Use
&body=Your message goes here(use%20for spaces if needed, although browsers often handle spaces correctly)
Here's an example:
<a href="mailto:[email protected]?subject=Inquiry%20About%20Your%20Service&body=Dear%20Team,%0D%0A%0D%0AI%20am%20writing%20to%20inquire%20about...">Inquire Now</a>(Note: %0D%0A creates a line break in the email body.)
Adding CC and BCC (Optional)
You can also pre-fill the Carbon Copy (CC) and Blind Carbon Copy (BCC) fields using &cc= and &bcc=. Similar to the 'To' field, you can list multiple addresses in CC or BCC by separating them with commas.
<a href="mailto:[email protected][email protected]&[email protected]&subject=Regarding%20Your%20Request">Email with CC and BCC</a>Summary of Mailto Parameters
Understanding these parameters allows for more dynamic email links.
| Parameter | Description | Example Usage |
|---|---|---|
mailto: |
Required prefix to indicate an email link | mailto:[email protected] |
, |
Separator for multiple recipient addresses | mailto:[email protected],[email protected] |
? |
Separates the recipient list from parameters | mailto:[email protected]?subject=Hi |
& |
Separates multiple parameters | mailto:[email protected]?subject=Hi&body=Hello |
subject= |
Pre-fills the subject line | subject=Order%20Status |
body= |
Pre-fills the email body | body=Please%20send%20details |
cc= |
Pre-fills the CC field(s) | [email protected],[email protected] |
bcc= |
Pre-fills the BCC field(s) | [email protected] |
By using the <a> tag with the href attribute and the mailto: scheme, you can effectively create email links in your HTML documents, from simple recipient links to more complex ones including subject, body, CC, and BCC.
