Email and phone links in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an email link that opens the user's email app.

HTML

<a href="[1]">Email us</a>

Drag options to blanks, or click blank then click option'

Atel:[e-mail]

Bhttp://[e-mail]

Cmailto:[e-mail]

Demail:[e-mail]

Attempts:

3 left

💡 Hint

Common Mistakes

Using http:// instead of mailto:.

Using tel: which is for phone numbers.

The mailto: protocol in the href attribute creates an email link that opens the user's email app.

2fill in blank

medium

Complete the code to create a phone link that allows users to call a number when clicked.

HTML

<a href="[1]">Call us</a>

Drag options to blanks, or click blank then click option'

Adial:[phone]

Bcall:[phone]

Cphone:[phone]

Dtel:[phone]

Attempts:

3 left

💡 Hint

Common Mistakes

Using call: or phone: which are not valid protocols.

Forgetting the plus sign for international numbers.

The tel: protocol in the href attribute creates a phone link that opens the phone dialer on devices.

3fill in blank

hard

Fix the error in the phone link so it works correctly on mobile devices.

HTML

<a href="[1]">Contact</a>

Drag options to blanks, or click blank then click option'

Atel:[phone]

Btel:[phone]

Ctel:[phone]

Dtel:[phone]

Attempts:

3 left

💡 Hint

Common Mistakes

Including dashes or parentheses in the phone number link.

Omitting the plus sign for international format.

Using tel:[phone] with the plus sign and no extra characters ensures the phone link works universally on mobile devices.

4fill in blank

hard

Fill both blanks to create an accessible email link with a descriptive label.

HTML

<a href="[1]" aria-label="[2]">Send Email</a>

Drag options to blanks, or click blank then click option'

Amailto:[e-mail]

BCall support

CEmail support at [e-mail]

Dtel:[phone]

Attempts:

3 left

💡 Hint

Common Mistakes

Using a phone link in the email href.

Not providing a meaningful aria-label.

The href uses mailto: for email. The aria-label describes the link for screen readers, improving accessibility.

5fill in blank

hard

Fill all three blanks to create a phone link with a visible number and an accessible label.

HTML

<a href="[1]" aria-label="[2]">[3]</a>

Drag options to blanks, or click blank then click option'

Atel:[phone]

BCall us at [phone]

C[phone]

Dmailto:[e-mail]

Attempts:

3 left

💡 Hint

Common Mistakes

Using mailto: in a phone link.

Not matching the visible text with the phone number.

The href uses tel: with the full number. The aria-label describes the link for screen readers. The visible text shows the phone number clearly.