How To Make An Email Link

In This Tutorial, I Show You How To Make An Email Link

One of the nice things about XHTML is how easy it is to make an email link.

If you already know how to make a page link, then you’re just about there.

There is one thing that I caution you to do to and I’ll get to that later on.

Let’s Break This Down

Suppose I want to make an email link to bud@joyofcode.com, which, as it happens, is my email address.

Ready? Here’s how to do it:

Code View

<a href="mailto:bud@joyofcode.com">
bud@joyofcode.com</a>

Browser View

bud@joyofcode.com


Make Sure To Let Your Web Visitor See The Actual Email Address

Notice how you see the email address – bud@joyofcode.com – on the page itself. Yes, I know it might not look pretty, but it sure is practical.

Why’s that?

If I had set up my email address link as Bud Kraus, it’s entirely possible that it would not work for many people. If your visitor is using a web based email program like gmail or Hotmail, then when the address is clicked on, nothing much will happen. That’s a bad thing.

Showing the actual email address as the link, gives the visitor the option of copying and pasting the address into the email program if all else fails – and all else usually fails.

Go Ahead, Try It Yourself

Give it a try. Copy and paste

<a href="mailto:bud@joyofcode.com">bud@joyofcode.com</a>

into the box below or feel free to write your own email link. Then click the "GIVE IT A TRY" box and check it out.

Test Your Code In This Box – The Code Tester


Here’s What You Did


3 thoughts on “How To Make An Email Link

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get Happy And Start Learning HTML Right Now

Do The First Two Lessons For Free!!

Joy Of Code girl happy at her laptop

All Of My Free Web Design Tutorials