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


6 thoughts on “How To Make An Email Link

    • This is close to what I’m looking for, but is it possible to click on a link that would take my students to their own personal email inboxes?

  1. Hi I am so delighted I found your weblog, I really found you by mistake,
    while I was looking on Askjeeve for something else,
    Anyhow I am here now and would just like to say many thanks for a incredible
    post and a all round exciting blog (I also love the theme/design), I don’t have time
    to read it all at the minute but I have book-marked it and also included your RSS feeds, so
    when I have time I will be back to read a lot more, Please do keep up the fantastic b.

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