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