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.