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.

Practice

1. What does the mailto: prefix do when used in an <a> tag?

easy

A. It creates a link that opens the user's email program to send an email.

B. It creates a link that calls a phone number.

C. It creates a link that downloads a file.

D. It creates a link that opens a website.

Solution

1. Step 1: Understand the mailto: prefix

   The mailto: prefix in an <a> tag tells the browser to open the default email program when clicked.

2. Step 2: Compare with other prefixes

   The tel: prefix is for phone calls, not emails. Other prefixes like http: open websites.

3. Final Answer:

   It creates a link that opens the user's email program to send an email. -> Option A

4. Quick Check:

   mailto: = email link [OK]

Hint: Remember mailto opens email apps, tel opens phone dialer [OK]

Common Mistakes:

• Confusing mailto with tel prefix
• Thinking mailto opens websites
• Assuming mailto downloads files

2. Which of the following is the correct syntax to create a clickable phone number link in HTML?

easy

A. Call us

B. Call us

C. Call us

D. Call us

Solution

1. Step 1: Identify the correct prefix for phone links

   The correct prefix to create a phone link is tel:. It tells the browser to open the phone dialer.

2. Step 2: Check the syntax of the <a> tag

   The href attribute should be tel:[phone] to work properly.

3. Final Answer:

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

4. Quick Check:

   tel: prefix = phone link [OK]

Hint: Use tel: prefix exactly for phone links in href [OK]

Common Mistakes:

• Using phone: instead of tel:
• Using callto: which is not standard
• Misspelling the prefix

3. What will happen when the user clicks this link?

<a href="mailto:[e-mail]">Email us</a>

medium

A. The browser will open the default email app with '[e-mail]' in the recipient field.

B. The browser will open the phone dialer with the number '[e-mail]'.

C. The browser will navigate to the website 'mailto:[e-mail]'.

D. Nothing will happen because the link is invalid.

Solution

1. Step 1: Analyze the href attribute

   The href uses mailto: with an email address, which triggers the email client.

2. Step 2: Understand browser behavior on click

   Clicking the link opens the default email program with the recipient field filled with '[e-mail]'.

3. Final Answer:

   The browser will open the default email app with '[e-mail]' in the recipient field. -> Option A

4. Quick Check:

   mailto: opens email client [OK]

Hint: mailto: opens email client with address filled [OK]

Common Mistakes:

• Thinking it opens a website
• Confusing mailto with tel
• Assuming no action happens

4. Identify the error in this phone link and choose the fix:

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

medium

A. Change tel to phone: href="phone:[phone]"

B. Add a colon after tel: href="tel:[phone]"

C. Remove tel prefix: href="1234567890"

D. Add double slashes: href="tel://1234567890"

Solution

1. Step 1: Check the href syntax

   The tel prefix must be followed by a colon : to be valid.

2. Step 2: Identify the correct fix

   Adding the colon after tel fixes the link to href="tel:[phone]".

3. Final Answer:

   Add a colon after tel: href="tel:[phone]" -> Option B

4. Quick Check:

   Correct tel: syntax needs colon [OK]

Hint: Always put colon after tel in href [OK]

Common Mistakes:

• Omitting the colon after tel
• Using phone: instead of tel:
• Adding unnecessary slashes

5. You want to create a contact section with both email and phone links that are accessible and clear. Which HTML snippet is best?

hard

A. EmailPhone

B. [e-mail]1234567890

C. Click hereCall now

D. Email SupportCall Support

Solution

1. Step 1: Check for accessibility and clarity

   <a href="mailto:[e-mail]" aria-label="Send email to support">Email Support</a><br><a href="tel:[phone]" aria-label="Call support phone number">Call Support</a> uses clear link text and aria-label attributes to describe the links for screen readers.

2. Step 2: Compare with other options

   <a href="mailto:[e-mail]">[e-mail]</a><br><a href="tel:[phone]">1234567890</a> shows raw contact info but lacks descriptive text. <a href="mailto:[e-mail]">Click here</a><br><a href="tel:[phone]">Call now</a> uses vague text. <a href="mailto:[e-mail]" title="Email">Email</a><br><a href="tel:[phone]" title="Phone">Phone</a> uses title which is less reliable for accessibility.

3. Final Answer:

   <a href="mailto:[e-mail]" aria-label="Send email to support">Email Support</a><br><a href="tel:[phone]" aria-label="Call support phone number">Call Support</a> -> Option D

4. Quick Check:

   Clear text + aria-label = best accessibility [OK]

Hint: Use clear text and aria-label for accessible contact links [OK]

Common Mistakes:

• Using vague link text like 'Click here'
• Not adding aria-labels for screen readers
• Relying only on title attribute