Email and phone links in HTML - Browser Rendering Trace

Render Flow - Email and phone links

Read <a href="mailto:[e-mail]">

→Create anchor node

↓

Read <a href="tel:[phone]">

→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:[e-mail]">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:[e-mail]">Send Email</a>
<a href="tel:[phone]">Call Us</a>

Render Quiz - 3 Questions

After adding the mailto link in step 1, what do you see?

A Plain text with no underline

B Underlined clickable text labeled 'Send Email'

C A button element

D An 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

Property	Value	Effect	Common Use
href	mailto:[e-mail]	Creates clickable email link	Open email client to send mail
href	tel:[phone]	Creates clickable phone link	Open phone dialer to call number
target	_blank	Open link in new tab/window	Used with mailto or tel to open externally

Concept Snapshot

Email and phone links use anchor tags with special href values. Use href="mailto:[e-mail]" to open email client. Use href="tel:[phone]" to open phone dialer. Links appear as underlined clickable text. Function depends on device support and default apps.