Email, Telephone and Download Links

Concept

An href does not have to point at a web page. Different URL schemes hand the link to a different application: mailto: opens an email client, tel: starts a phone call, sms: opens a message. The download attribute changes the browser behaviour instead, saving the file rather than displaying it.

Email links

<a href="mailto:admissions@example.edu">admissions@example.edu</a>

A subject and a body can be pre filled with a query string. Every value must be URL encoded: a space becomes %20, a line break becomes %0A.

<a href="mailto:admissions@example.edu?subject=Application%20query&body=Hello%2C%0A%0AI%20am%20applying%20for...">
  Email the admissions office
</a>

<!-- several recipients, plus cc and bcc -->
<a href="mailto:one@example.edu,two@example.edu?cc=head@example.edu&subject=Timetable">
  Email the department
</a>

The first parameter is separated by ? and every one after it by &, which inside HTML must be written &.

Two honest limitations

• It opens whatever the device treats as the default mail application. Someone using webmail with no desktop client configured gets nothing, or an error. Always print the address as visible text so it can be copied.
• Plain addresses in markup are harvested by spam crawlers. Obfuscation with entities delays that by very little. A contact form is the durable answer; a mailto link is the convenient one.

Telephone links

<a href="tel:+912026001234">+91 20 2600 1234</a>

The rules are simple and worth following exactly:

• Use the international format with a leading + and the country code. A local number fails for anyone dialling from abroad or roaming.
• Strip spaces, hyphens and brackets from the href. Keep them in the visible text where they help a human read the number.
• An extension is written with a comma, which most dialers interpret as a pause: tel:+912026001234,401.

On a desktop the link may open a calling application or do nothing, which is fine as long as the number is also readable as text.

<a href="sms:+912026001234?body=Send%20me%20the%20fee%20structure">Message us</a>

<a href="https://wa.me/912026001234">Chat on WhatsApp</a>

The download attribute

Normally the browser decides what to do with a file it receives. A PDF opens in the viewer, an image is displayed. download overrides that and saves the file instead.

<!-- save with its own name -->
<a href="/files/fee-structure-2026.pdf" download>Fee structure (PDF, 240 KB)</a>

<!-- save under a different name -->
<a href="/files/report-final-v7-USE-THIS.pdf" download="annual-report-2026.pdf">
  Annual report (PDF, 1.2 MB)
</a>

The critical restriction: download is ignored for cross origin URLs. A link to a file on another domain opens normally, whatever you write. This is a security rule, not a bug, and it surprises people constantly. It also has no effect over file://, so test it on a real server.

Example

<section>
  <h2 id="contact">Contact the office</h2>

  <p>
    Phone:
    <a href="tel:+912026001234">+91 20 2600 1234</a>
    (Monday to Friday, ten to five)
  </p>

  <p>
    Email:
    <a href="mailto:office@example.edu?subject=Website%20enquiry">office@example.edu</a>
  </p>

  <p>
    <a href="/files/prospectus-2026.pdf" download="prospectus-2026.pdf">
      Download the prospectus (PDF, 3.4 MB)
    </a>
  </p>
</section>

Explanation

Each link states what will happen before it is activated. The phone number is visible as text, so a desktop reader can copy it. The email address is visible for the same reason. The download says its format and its size, so nobody on a metered connection is caught out by a three megabyte file.

Important rules

• Every value in a mailto query string must be URL encoded.
• Inside HTML, & in a URL should be written &.
• tel: numbers need the country code and no punctuation.
• download only works same origin.
• These links leave the web page. Warn the reader in the link text.

Common mistakes

• Writing href="mailto: office@example.edu" with a space after the colon. It fails silently.
• Leaving spaces or hyphens inside a tel: value.
• Using a local phone number with no country code.
• Expecting download to work on a file hosted on a CDN.
• Making the email address only a link, so a reader without a mail client cannot copy it.
• Failing to say that a link opens a PDF or starts a download, and how big it is.

Best practices

• Show the address or number as visible text as well as linking it.
• State the file type and size in the link text for every download.
• Pre fill a subject line so incoming email is easy to route.
• Offer a contact form alongside a mailto link for readers whose device cannot open one.
• Test download links on a real server, never from file://.

Practice

1. Build a contact block with a phone link, an email link with a pre filled subject, and a download link that renames the file.
2. Encode this subject line for a mailto URL: Fee query - 2026 intake.
3. Host a PDF on another domain and link it with download. Explain what happens and why.
4. Write a phone link for a number with extension 401 that pauses before dialling the extension.