Email and phone links in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of using mailto: in an HTML link?

The mailto: scheme creates a link that opens the user's default email program to send an email to the specified address.

beginner

How do you create a clickable phone number link in HTML?

Use the tel: scheme in an anchor tag's href attribute, like <a href="tel:[phone]">Call us</a>, which allows users to tap and call on supported devices.

intermediate

Why should you include the full international phone number format in tel: links?

Including the full international format (with + and country code) ensures the phone number works correctly for users in different countries and devices.

beginner

What accessibility tip should you follow when creating email or phone links?

Use clear link text that describes the action, like 'Email support' or 'Call customer service', so screen readers and all users understand the link purpose.

intermediate

Can you use mailto: links to add a subject or body text to the email? How?

Yes, by adding query parameters like ?subject=Hello&body=Message after the email address, for example: mailto:[e-mail]?subject=Hello&body=Message.

Which HTML attribute value creates a link that opens the email client?

A mailto:[e-mail]

B tel:[phone]

C http://example.com

D email:[e-mail]

The 'mailto:' scheme tells the browser to open the default email program with the specified address.

What does tel:[phone] do in an anchor tag?

A Opens a website

B Sends an email to the number

C Starts a phone call to the number on supported devices

D Does nothing

The 'tel:' scheme creates a clickable phone link that can start a call on phones or apps that support it.

How can you add a subject line to an email link?

A tel:[e-mail]?subject=Hello

B mailto:[e-mail]#subject=Hello

C email:[e-mail]?subject=Hello

D mailto:[e-mail]?subject=Hello

Query parameters like '?subject=Hello' after the email address set the email subject.

Why is it important to use descriptive text for email and phone links?

A To help screen reader users understand the link's purpose

B To make the link look colorful

C To increase the font size automatically

D To disable the link on mobile devices

Descriptive text improves accessibility by clearly explaining what the link does.

Which is the correct way to write a phone link for the number [phone]?

A <a href="tel:[phone]">Call us</a>

B <a href="tel:[phone]">Call us</a>

C <a href="phone:[phone]">Call us</a>

D <a href="call:[phone]">Call us</a>

The 'tel:' scheme with the full international number and no spaces or dashes is the correct format.

Explain how to create an email link in HTML that opens the user's email program with a preset subject.

Think about how to add extra info after the email address in the link.

Describe best practices for making phone number links accessible and internationally usable.

Consider both technical format and user experience.