Email Links in HTML Language

Leave a Comment / Programming Languages / By piembsystech

://en.wikipedia.org/wiki/HTML">HTML, creating email links is simple and can be customized to suit your design and functionality requirements. In this post, we’ll walk you through the process of creating email links with examples.

The Basic Email Link

Creating a basic email link in HTML is straightforward. Here’s the code for a simple email link:

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

In this code, replace “yourname@example.com” with the actual email address you want to link to. Users will see the “Send an Email” text, and when they click on it, their default email client will open with your provided email address pre-filled.

Customizing the Email Subject and Body

You can further enhance the user experience by predefining the email’s subject and body. For example:

<a href="mailto:yourname@example.com?subject=Feedback&body=Hi,%20I%20have%20some%20feedback%20for%20you.">Send Feedback</a>

In this code, the ?subject= and &body= parameters allow you to specify the subject and body of the email. Remember to replace spaces with %20 in the URL, as shown in the example above.

Opening the User’s Email Client in a New Window

If you want to open the email link in a new browser window or tab, you can use the target="_blank" attribute:

<a href="mailto:yourname@example.com?subject=Inquiry" target="_blank">Open in New Window</a>

This code will open the user’s default email client in a new tab when they click the link.

Styling Email Links

As with any HTML element, you can style your email links using CSS. Here’s an example of how to change the link’s color and add some hover effects:

<style>
  a.email-link {
    color: #007BFF; /* Blue color */
    text-decoration: none; /* Remove underline */
  }

  a.email-link:hover {
    text-decoration: underline; /* Add underline on hover */
  }
</style>

<a class="email-link" href="mailto:yourname@example.com?subject=Question">Contact Us</a>