Bird
Raised Fist0
HTMLmarkup~15 mins

Email and phone links in HTML - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Email and Phone Links
📖 Scenario: You are creating a simple contact section for a website. Visitors should be able to click on an email address to open their email app and click on a phone number to call directly from their phone or device.
🎯 Goal: Build a contact section with clickable email and phone links using proper HTML anchor tags.
📋 What You'll Learn
Use an anchor tag with href starting with mailto: for the email link
Use an anchor tag with href starting with tel: for the phone link
Include accessible text inside the links
Use semantic HTML with a section element for the contact area
💡 Why This Matters
🌍 Real World
Contact sections on websites often use email and phone links so visitors can easily reach out.
💼 Career
Web developers must know how to create accessible and functional contact links for user interaction.
Progress0 / 4 steps
1
Create the contact section skeleton
Create a section element with the id attribute set to contact. Inside it, add a heading <h2> with the text Contact Us.
HTML
Hint

Use a section tag with id="contact" and add a heading inside it.

2
Add the email link
Inside the section with id="contact", add an anchor tag <a> with the href attribute set to mailto:support@example.com. The link text should be support@example.com.
HTML
Hint

Use href="mailto:support@example.com" in the anchor tag to create an email link.

3
Add the phone link
Below the email link inside the section, add another anchor tag <a> with the href attribute set to tel:+1234567890. The link text should be +1 234 567 890.
HTML
Hint

Use href="tel:+1234567890" in the anchor tag to create a phone link.

4
Add spacing and accessibility
Add a aria-label attribute to the email link with the value Send email to support@example.com. Add a space or line break between the email and phone links for better readability.
HTML
Hint

Add aria-label to the email link and use a <br> tag between links for spacing.

Practice

(1/5)
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

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:1234567890 to work properly.

  3. Final Answer:

    <a href="tel:1234567890">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:info@example.com">Email us</a>
medium
A. The browser will open the default email app with 'info@example.com' in the recipient field.
B. The browser will open the phone dialer with the number 'info@example.com'.
C. The browser will navigate to the website 'mailto:info@example.com'.
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 'info@example.com'.

  3. Final Answer:

    The browser will open the default email app with 'info@example.com' 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="tel1234567890">Call us</a>
medium
A. Change tel to phone: href="phone:1234567890"
B. Add a colon after tel: href="tel:1234567890"
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:1234567890".

  3. Final Answer:

    Add a colon after tel: href="tel:1234567890" -> 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

Solution

  1. Step 1: Check for accessibility and clarity

    <a href="mailto:support@example.com" aria-label="Send email to support">Email Support</a><br><a href="tel:+1234567890" 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:support@example.com">support@example.com</a><br><a href="tel:+1234567890">1234567890</a> shows raw contact info but lacks descriptive text. <a href="mailto:support@example.com">Click here</a><br><a href="tel:+1234567890">Call now</a> uses vague text. <a href="mailto:support@example.com" title="Email">Email</a><br><a href="tel:+1234567890" title="Phone">Phone</a> uses title which is less reliable for accessibility.

  3. Final Answer:

    <a href="mailto:support@example.com" aria-label="Send email to support">Email Support</a><br><a href="tel:+1234567890" 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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard