Linking Your Email Address into a Page

In addition to linking between pages and between parts of a single page, the <a> tag allows you to link to your email address. This is the simplest way to enable readers of your web pages to "talk back" to you. Of course, you could just tell readers your email address and trust them to type it into whatever email program they use if they want to say something to you, but that would be much more error prone. You can make it almost completely effortless for them to send you messages by providing a clickable link to your email address.

An HTML link to an email address looks like the following:

 <a href="mailto:[e-mail]">Send me an email message.</a> 

The words "Send me an email message" will appear just like any other <a> link. In most web browsers, when someone clicks the link she gets a window in which to type a message that is immediately sent to youwhatever email program the person uses to send and receive email will automatically be used.

If you want people to see your actual email address (so that they can make note of it or send a message using a different email program), include it both in the HRef attribute and as part of the message between the <a> and </a> tags, like this:

 <a href="mailto:[e-mail]">[e-mail]</a> 

As I mentioned earlier, when someone clicks an email link her email program will open and a new message will be started with the email recipient already filled in. You can provide some additional information in the link so that the subject and body of the message also have default values. You do this by adding subject and body attributes to the mailto link. These attributes are a little different from typical HTML attributes, and therefore must be coded slightly differently. You separate the attributes from the email address with a question mark (?), and then separate each attribute with an ampersand (&). Following is an example of specifying a subject and body for the preceding email example:

 <a href="mailto:[e-mail]?subject=Book Question&amp;body= When is the next edition coming out?">[e-mail]</a> 

When a user clicks this link, an email message is created with [e-mail] as the recipient, Book Question as the subject of the message, and When is the next edition coming out? as the message body.

Did you Know?

If you want to specify only an email message subject and not the body, you can just leave off the ampersand and the body attribute in the link.

Before you run off and start plastering your email address all over your web pages, I have to give you a little warning and then let you in on a handy trick. You're no doubt familiar with spammers that build up databases of email addresses and then bombard them with junk mail advertisements. One way spammers "harvest" email addresses is by using programs that automatically search web pages for mailto links. I have personally seen the negative effects of publishing an email address on a web page and then promptly seeing a spike in junk mail. So I'm very careful about revealing email addresses now.

Fortunately, there is a little trick that will thwart the vast majority of spammers. This trick involves using character entities to encode your email address, which confuses "scraper" programs that are attempting to "harvest" your email address from your web pages. As an example, take the earlier sample email address, [e-mail]. If you replace a few of the letters in the address with their character entity equivalents, most email harvesting programs will be thrown off. Lowercase ASCII character entities begin at &#97; for letter a and increase through the alphabet in order. So, for example, letter c is &#99;. Replacing both of the c's in the sample address yields the following code:

 <a href="mailto:di&#99;ko@netletter.&#99;om">Send me an email message.</a> 

The important thing to note is that a web browser ends up interpreting the &#99; character entity as a letter c, which means that the end result is the same from the browser's perspective. However, automated email harvesting programs search the raw HTML code for pages, which in this case is showing a fairly jumbled-looking email address.

Pulling all of what you've learned about email links into a practical example, check out Listing 6.3 and Figure 6.5, which show yet another version of a hockey player web page with a link to email my friend Terry.

Figure 6.5. The mailto: link in Listing 6.3 looks a lot like http:// links on the page.

By the Way

Terry is far too dangerous for me to be printing his real email address in thousands of books, so please understand that the email address in the sample code isn't real.

Listing 6.3. Using the <a> Tag to Link to an Email Address

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>Music City Mafia - Terry Lancaster</title>   </head>   <body>     <p style="font-family:verdana, arial; font-size:18pt; font-weight:bold">16 -     Terry Lancaster</p>     <p style="font-family:verdana, arial; font-size:12pt; color:navy">       <img src="/books/4/158/1/html/2/tlancaster.jpg" alt="Terry &quot;Big T&quot; Lancaster" /><br />       <span style="font-weight:bold">Nickname:</span> Big T<br />       <span style="font-weight:bold">Position:</span> RW<br />       <span style="font-weight:bold">Height:</span> 6'3"<br />       <span style="font-weight:bold">Weight:</span> 195<br />       <span style="font-weight:bold">Shoots:</span> Left<br />       <span style="font-weight:bold">Age:</span> 40<br />       <span style="font-weight:bold">Birthplace:</span>        <a href="http://en.wikipedia.org/wiki/Nashville%2C_Tennessee">Nashville,       TN</a>     </p>     <hr />     <p style="font-family:verdana, arial; font-size:12pt; color:navy">       <span style="font-weight:bold">Favorite NHL Player:</span>        <a href="http://www.nhl.com/players/8448091.html">Brett Hull</a><br />       <span style="font-weight:bold">Favorite NHL Team:</span>        <a href="http://www.nashvillepredators.com/">Nashville Predators</a><br />       <span style="font-weight:bold">Favorite Southern Fixin:</span>        <a href="http://southernfood.about.com/od/potatorecipes/r/blbb442.htm">       Skillet Fried Potatoes</a><br />       <span style="font-weight:bold">Favorite Meat and Three:</span>        <a href="http://www.hollyeats.com/Swetts.htm">Swett's</a>        (<a href="http://maps.google.com/maps?q=2725+clifton+ave,+nashville,+tn"       rel="external">map</a>)       <br />       <span style="font-weight:bold">Favorite Country Star:</span>        <a href="http://www.patsycline.com/">Patsy Cline</a><br />       <span style="font-weight:bold">Favorite Mafia Moment:</span>        "<a href="mcmplayer_chale.html">Chet</a> finishing the game with his        eyelid completely slashed through."     </p>     <hr />     <p style="font-family:verdana, arial; font-size:12pt">       <a href="mailto:l&#97;ncastert@musiccitym&#97;fi&#97;.com?subject=       Fan Question&amp;body=What's your secret?">Contact Terry.</a>     </p>   </body> </html> 

The email link in this code occurs near the bottom of the code when the text Contact Terry. is used as linking text for a mailto link. What is important to note is how the letter a's in the email address are replaced by their character entity equivalents (&#97;), which helps hide the address from spammers. Pay attention to the status bar in the figure and you'll see that the browser interprets the correct email address. When someone clicks the email link shown in Figure 6.5, a separate window (see Figure 6.6) opens; the window has spaces for a subject line and an email message. The email address from the link is automatically entered, and the user can simply click the Send button to send the message.

Figure 6.6. Clicking the top link shown in Figure 6.5 brings up this email window (or the email software set up on your computer).

Did you Know?

It is customary to put an email link to the web page author at the bottom of every web page. Not only does this make it easy for others to contact you, but it also gives them a way to tell you about any problems with the page that your testing may have missed. Just don't forget to use the email address character entity trick so that your address flies under the radar of spammers.

If you paid extremely close attention to Figure 6.5, you may have noticed a new link in addition to the email link. I'm referring to the birthplace information field, which is now shown with the text "Nashville, TN" as a link. This text wasn't linked in the last version of this page in the previous hour. In this latest example, I used one of my favorite web sites to add another informative link to the page. I'm referring to Wikipedia, the free online encyclopedia. Read on to learn more!