Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to manipulate e-mail links in HTML

In this article we will learn how to create e-mail links in HTML and we will see different scenarios around how we can create the same in combination of CC, BCC, Multiple recipients etc.

So to make an e-mail link on your page, all one can do is use the standard link tag and the key is in what you use as the address of the link. To push the browser to read it as an e-mail link, one need to use "mailto:" rather than "http://" to begin the address. After the "mailto:", you will use your e-mail address rather than a Web address, like this:

Listing1: HTML referring to mailto: tag

<a href="mailto:your_email_address">E-mail Me!</a>

Here it is just required to replace the your_email_address with your e-mail address. Here is an example, to create an email link to myself, one might place something like yourname@sitename.com in that space, like this:

Listing2: Creating email link to yourself

<a href="mailto:YourName@sitename.com">Give me some mail!</a>

One can come up with email HTML Code using a "mailto" hyperlink - the HTML email link code that opens someone's email software (like Microsoft Outlook for instance). Let us see how to write the code for this.

The below is the HTML email link code example. If you want the person to click the mailto hyperlink and their email client to open with your email in the TO part of the email then you need to implement something like the following code.

Please email me at <a href="mailto:YourName@sitename.com">YourName@Sitename.com</a>

This is pretty much the simplest implementation of an email's HTML link code. To make this work for you simply change the two occurrences of the email address to your own email address.

As a recommendation we would use your email as the link text instead of something like "contact me" or similar which usually suggests to the user that they're going to be sent to a contact form - more so than having their email client open up.

Email HTML Code with Subject

We'll take the above example and modify it so that now it will have you email in the TO field and have a subject line in the SUBJECT field of the email.

Please email me at <a href="mailto:YourName@yoursite.com?subject=This is a test subject">YourName@sitename</a>

If you look at the text above you can see that we added the ?subject= parameter to the email and that the subject's lines value will be "This is a test subject"

Email HTML Code with Subject and Body

You can even go one step further and add text that will appear in the body of the email. At this point all the person has to do is press send. There are very few circumstances where you would need to add the body value but for the sake of completeness here's what the email code would look like.

Please email me at <a href="mailto:YourName@sitename.com?subject=This is a test subject&body=We today learned how to create email link code on this website.">YourName@sitename.com</a>

One should not include a question mark, equal sign, an ampersand or double quotes in your subject line or body as that will break the code and in case you do need to include them than they need to be written differently. You can either memorize the following code - ampersand is & - double quotes is " - equal sign is = and question mark is ? or one can make use of the above code to generate a tool to make the email link code in a safely encoded manner (though some email software may require you not to use even the encoded equivalents in the email link).

How the E-mail link Code looks like?

The view of Email Link Code

Figure 1: The view of Email Link Code

Simple email link:

Listing3: Referring to the simple link

<a href="mailto:your@email.address">Contact Us</a> 

This is the simplest link possible. Just like a regular URL link to any site, this link starts with the start tag <a href="">, followed by the text you want to display in the link, and then the end tag </a>.

The only difference is what goes inside the quotation marks. For an email address link, it's mailto:, followed an email address, and then optionally some more advanced options described below.

Multiple Recipients:

Listing4: Referring to the Multiple recipients link

<a href="mailto:first@email.address,second@email.address,third@email.address">Contact Us</a> 

This link is just like the above link, but made for multiple email addresses. To create this link, just type in each email address separated by commas.

Comparing the cc and bcc options to this one, this one has an advantage. When encoding email links to avoid spammers, you can type all three email addresses into the email address slot and have them all masked.

Email link with a subject line:

Listing5: Referring to the code with a Subject link

<a href="mailto:your@email.address?subject=Comments about the color blue">Contact Us</a> 

To create a link like this, type ?subject=Comments about the color blue inside the quotation marks, immediately after the email addresses.

Email link with a cc:

Listing6: Referring to the code with a cc link

<a href="mailto:first@email.address?cc=second@email.address,third@email.address">Contact Us</a> 

To create a link like this, type ?cc=second@email.address,third@email.address inside the quotation marks, immediately after your email address.

Email link with a bcc:

Listing7: Referring to the code with a bcc link

<a href="mailto:first@email.address?bcc=second@email.address,third@email.address">Contact Us</a> 

To create a link like this, type ?bcc=second@email.address,third@email.address inside the quotation marks, immediately after your email address.

Email link with a message started in the body:

This option is somewhat new to html, meaning that some email programs haven't started supporting multiple paragraphs in email links. You should definitely consider this before you use multiple paragraphs. The alternative option is just using one paragraph:

Listing8: Referring to the e-mail link with a body mesage

<a href="mailto:your@email.address?body=One paragraph.">Contact Us</a> 

<a href="mailto:your@email.address?body=First Paragraph. %0A%0A Second paragraph. %0A%0A Third Paragraph etc.">Contact Us</a> 

To create this link, type ?body=One paragraph. or ?body=First Paragraph. %0A%0A Second paragraph. %0A%0A Third Paragraph etc. inside the quotation marks, immediately after your email address.

Conclusion

It brings us to an end to this tutorial where we learned how to create e-mail links in HTML. Also we learned on the different combinations that can be used while e-mailing the link.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login