Bird
Raised Fist0
HTMLmarkup~8 mins

Email and phone links in HTML - Browser Rendering Trace

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Render Flow - Email and phone links
Read <a href="mailto:example@example.com">
→Create anchor node
↓
Read <a href="tel:+1234567890">
→Create anchor node
The browser reads anchor tags with special href values starting with mailto: or tel:. It creates clickable links that open the email client or phone dialer when clicked.
Render Steps - 4 Steps
Code Added:<a href="mailto:example@example.com">Send Email</a>
Before
[No link here]
→
After
[Send Email]
(underlined clickable text)
Adding the anchor tag with mailto: creates a clickable email link that looks like normal link text.
🔧 Browser Action:Creates anchor element with mailto: href, triggers paint of link style
Code Sample
Two clickable links: one opens the email app to send an email, the other opens the phone dialer to call.
HTML
<a href="mailto:example@example.com">Send Email</a>
<a href="tel:+1234567890">Call Us</a>
Render Quiz - 3 Questions
Test your understanding
After adding the mailto link in step 1, what do you see?
APlain text with no underline
BUnderlined clickable text labeled 'Send Email'
CA button element
DAn image icon
Common Confusions - 2 Topics
Why doesn't clicking my mailto link open the email app?
The browser relies on your device having a default email app set up. If none is set, clicking mailto does nothing or shows an error.
💡 Make sure your device has a default email client configured to handle mailto links.
Why does the tel link not work on my desktop browser?
Tel links usually work on phones or devices with calling apps. On desktops without calling apps, clicking tel may do nothing.
💡 Tel links are best tested on phones or devices with calling capability.
Property Reference
PropertyValueEffectCommon Use
hrefmailto:someone@example.comCreates clickable email linkOpen email client to send mail
hreftel:+1234567890Creates clickable phone linkOpen phone dialer to call number
target_blankOpen link in new tab/windowUsed with mailto or tel to open externally
Concept Snapshot
Email and phone links use anchor tags with special href values. Use href="mailto:email@example.com" to open email client. Use href="tel:+1234567890" to open phone dialer. Links appear as underlined clickable text. Function depends on device support and default apps.

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