Tutorial

HTML Tag Properties for Email

HTML Tag Properties for Email

In HTML, customize the <a> tag to create special email links. For example, I want to make it easier for my fictional email recipients (and fictional potential clients) to respond to my fictional email promotion of this months fictional special -- lemon macarons.

When they click on the email link, the following fields in their email composer will be automatically filled in because of the href attributes added in the <a> tag:

To: order@macaronshop.com
Cc: production@macaronshop.com, chief_baker@macaronshop.com
Bcc: delivery@macaronshop.com
Subject: March Lemon Macaron Order
Body: Please place [number] order of this months special lemon macarons for me. :)

The HTML would look like this:

It looks like a mess so lets breakdown the href attribute in the <a> tag¹:

mailto: represents the To field in the email composer.
? separates the main To field from the other fields.²
cc= represents the Cc field.
The comma (,) in the Cc field indicates that theres more than one email address to place in that field.³
The ampersand (&) separates each of the different email fields that comes after the To field.
bcc= represents the Bcc field.
subject= represents the Subject field.⁴
body= represents the main body of your email.⁵

When the link is clicked, the designated email composer will open, and the results are well-placed and worth the extra effort:

Order your lemon macarons today!

Happy coding!


REFERENCE LINKS

1. W3Schools: HTML tag
2. W3Schools: HTML Links (The Create a mailto link 2 example shows more options)
3. W3Schools: HTML URL Encoding Reference

NOTES:

1. The A and HREF in the <a> tag could be written in upper- or lower-case, its up to personal preference; for your information, href stands for hypertext reference.
2. If you wanted, you could leave the To field blank by not writing anything before the ?, but the ? still needs to added in for the rest of fields to be read properly. Ex: Order your lemon macarons today!
3. Theres no need to add a space (or %20) after the comma. The email composer will automatically add a space after the comma.
4. Use %20 to represent spaces between words in the HTML tag; this will help browsers interpret it correctly as word spacing and not for the purpose of separating the HTML tags attributes.
5. I used characters that arent alphanumeric in the email body. While email composers can usually interpret things like an apostrophe () or square brackets ([ ]) correctly, its a better idea to write out the encoding reference. (See link #3 for more info.)
6. Im not covering this, but if youd like to stylize the links appearance, visit W3Schools and check out their awesome library of tutorials and reference section; or feel free to ask me by leaving a comment for this post.
7. If you didnt know already, you must be able to edit your emails HTML in order for this to work.

REVISIONS

1. [2012.03.18 @ 10:15 AM] I added the laymans interpretation of the href attribute, added link #3, and added lots more extra notes to accompany the href breakdown.

visit link download