Email and phone links

Create links with the mailto: and tel: schemes.

Email links with mailto

To turn a link into an email address, you put the mailto: form in the href value: href="mailto:info@cafe-guide.com". When clicked, the browser opens the default email app with the address filled in.

This makes it easy for a reader to write to you from a contact page. You can also add a subject with ?subject= after the address, so the reader's email arrives ready for you.

Phone links with tel

To link to a phone number you use the tel: form: href="tel:+902125550100". Mobile browsers open the dialer when this link is tapped; on desktop it routes to a calling app.

Starting the number with a plus sign and country code is international; spaces and dashes may be added for readability. This form is especially handy for reservations on restaurant and cafe sites.

Exercise Add contact links to a cafe.

Add two links to the skeleton: one for email with mailto:reservation@cafe-guide.com, one for phone with tel:+902125550100. Choose your own anchor text.

Show example solution

<h1>Galata Cafe</h1>
<p>Contact:</p>
<a href="mailto:reservation@cafe-guide.com">Reservation</a>
<a href="tel:+902125550100">Call</a>

Forms steer the link

The mailto: and tel: forms let a link open a different app instead of a web page. On contact pages this lets a reader start an email or a call with one tap.

It is important not to forget the leading mailto: or tel: part; without this prefix the browser reads what you wrote as a relative file name.

Test yourself

Complete the email link.

<a href="____">Write to us</a>

Show answer

<a href="mailto:info@cafe-guide.com">Write to us</a>

How should href start for a phone number?
- href="phone:+902125550100"
- href="tel:+902125550100"
- href="call:+902125550100"
- href="+902125550100"
Show answer

href="tel:+902125550100" — Correct. The tel: form starts a phone call.
Match address form and use.

mailto:

Open email
tel:

Start a call
https://

Open a web page
#

Jump in page

Next lesson: Summary - Navigation menu

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies