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.

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