Email and phone links in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct syntax for an email link

Which option correctly creates a clickable email link that opens the user's email client to send an email to [e-mail]?

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

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

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

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

💡 Hint

The correct protocol for email links starts with 'mailto:' without slashes.

The 'mailto:' protocol is used in the href attribute to create email links. It should be followed directly by the email address without slashes or other prefixes.

📝 Syntax

intermediate

Correct syntax for a phone link

Which option correctly creates a clickable phone link that dials the number [phone] on supported devices?

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

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

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

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

💡 Hint

The correct protocol for phone links is 'tel:' without slashes.

The 'tel:' protocol is used in the href attribute to create phone links. It should be followed directly by the phone number without slashes or other prefixes.

❓ rendering

advanced

Visual result of an email link with subject

What will the user see in the browser when this code is rendered?

<a href="mailto:[e-mail]?subject=Support%20Request">Contact Support</a>

HTML

<a href="mailto:[e-mail]?subject=Support%20Request">Contact Support</a>

A A clickable link with text 'Contact Support' that opens a web page at 'mailto:[e-mail]'.

B A clickable link with text 'mailto:[e-mail]?subject=Support%20Request'.

C Plain text 'Contact Support' with no link.

D A clickable link with text 'Contact Support' that opens an email to [e-mail] with subject 'Support Request'.

💡 Hint

Look at the href attribute and the link text separately.

The anchor tag text is what the user sees as clickable. The href with 'mailto:' opens the email client with the specified email and subject.

❓ accessibility

advanced

Improving accessibility of phone links

Which option best improves accessibility for a phone link that dials [phone]?

HTML

<a href="tel:[phone]">Call toll-free</a>

A <a href="tel:[phone]" alt="Call toll-free">Call toll-free</a>

B <a href="tel:[phone]" title="Call toll-free">Call toll-free</a>

C <a href="tel:[phone]" aria-label="Call toll-free number 1 800 555 1234">Call toll-free</a>

D <a href="tel:[phone]" aria-hidden="true">Call toll-free</a>

💡 Hint

Screen readers use aria-label to describe links clearly.

The aria-label attribute provides a clear description for screen readers, improving accessibility. The alt attribute is not valid on tags. Title is less reliable for accessibility. aria-hidden hides the link from assistive tech.

🧠 Conceptual

expert

Behavior of email and phone links on different devices

Which statement is true about how email and phone links behave on desktop and mobile devices?

A On mobile devices, clicking a phone link opens the dialer app; on desktops, it may do nothing or open a calling app if installed.

B On desktops, clicking a phone link always opens the default phone app; on mobiles, it opens the SMS app.

C Email links open the SMS app on mobile devices and the email client on desktops.

D Phone links require JavaScript to work on mobile devices but not on desktops.

💡 Hint

Think about what apps are available on each device type.

Mobile devices usually have a dialer app that opens when clicking a phone link. Desktops may not have a dialer, so the link might do nothing or open a calling app if installed. Email links open the email client on both device types. Phone links do not require JavaScript.

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