HTML - Email Links

Creating Email Links

To create email links in HTML, use the <a> tag with the mailto: attribute. The mailto: attribute sets the email address where the link sends an email.

To set the email address, add it after the mailto: attribute in the <a> tag.

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

You can also add a subject line for the email. To do this, add subject= followed by the subject text after the email address.

<a href="mailto:example@example.com?subject=Inquiry">Send Email</a>

To pre-populate the message body of the email, use the body= parameter. Add body= followed by the message text after the email address or subject line.

<a href="mailto:example@example.com?subject=Inquiry&body=Dear Sir/Madam,">Send Email</a>

When setting multiple recipients for the email, separate each email address with a comma.

<a href="mailto:example1@example.com,example2@example.com">Send Email</a>

You can also add carbon copy (CC) and blind carbon copy (BCC) recipients in the email link. To add CC recipients, use the cc= parameter followed by the email addresses. For BCC, use the bcc= parameter.

<a href="mailto:example@example.com?cc=copyrecipient@example.com&bcc=blindcopyrecipient@example.com">Send Email</a>

Using these methods, you can create clickable email links that let users easily send emails from your web page.

Formatting Email Links

You can style email links using CSS to change their look and make them stand out on your web page.

To change the color of an email link, use the color property in your CSS. Set the color property to the wanted color value.

<style>
  a[href^="mailto:"] {
    color: blue;
  }
</style>

By default, email links are not underlined. To add an underline to email links, use the text-decoration property in your CSS. Set the text-decoration property to underline.

<style>
  a[href^="mailto:"] {
    text-decoration: underline;
  }
</style>

You can also apply hover effects to email links to change their look when the user hovers over them. Use the :hover pseudo-class in your CSS to set the hover styles.

<style>
  a[href^="mailto:"]:hover {
    color: red;
    text-decoration: none;
  }
</style>

By using these CSS techniques, you can format your email links to match the style of your web page and make them more noticeable to users.

Troubleshooting

When working with email links, you may come across some common issues. Here are a few troubleshooting tips to help you fix these problems:

One of the most common issues with email links is incorrect syntax. Make sure that you have used the correct syntax for the mailto: attribute in the <a> tag. Check that the email address is spelled correctly and that there are no extra spaces or characters in the link.

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

Another issue that may arise is the email client configuration on the user's device. Some email clients may not be set up to handle email links correctly. In such cases, the email link may not open the user's email client or may result in an error message. To help users, you can provide instructions on how to configure their email client to handle email links properly.

If email links are not working as expected, it's a good idea to provide alternative contact methods on your web page. This can include displaying your email address as plain text, providing a contact form, or listing other ways to get in touch, such as a phone number or social media profiles. By offering alternative contact methods, you give users other options to reach out to you if the email link doesn't work for them.

<p>You can also reach us at:</p>
<ul>
  <li>Email: example@example.com</li>
  <li>Phone: 123-456-7890</li>
  <li>Contact Form: <a href="/contact">Contact Us</a></li>
</ul>